Card
머리글·큰 값·보조 줄·출처 줄을 담는 기본 카드.
- 출시 화면에서 사용
개요
미리보기
온보딩 개선
10월 1일 – 10월 18일 · 문서 9개
회의록 3개와 메일 6통이 이 프로젝트로 묶였어요.
예시
상태
쓰임 예
떠 있는
온보딩 개선
10월 1일 – 10월 18일 · 문서 9개
회의록 3개와 메일 6통이 이 프로젝트로 묶였어요.채움
온보딩 개선
10월 1일 – 10월 18일 · 문서 9개
회의록 3개와 메일 6통이 이 프로젝트로 묶였어요.작은 여백
온보딩 개선
회의록 3개와 메일 6통이 이 프로젝트로 묶였어요.
이렇게 · 이렇게 하지 않기
- 이렇게 기록이나 경험에서 나온 카드는 바닥에 SourceLine을 둔다. 카드에 붙는 라벨은 예외 상태(추정, 원문 열 수 없음, 검토 필요)뿐이다. 카드 전체가 링크면 안에 다른 버튼을 넣지 않는다.
- 이렇게 필요한 부분만 조합한다(머리글·본문·행동). 높이는 내용을 따른다.
- 이렇게 카드 전체가 이동이면 href. 안에 행동이 있으면 href를 쓰지 않는다.
- 이렇게 하지 않기 들어 올림·확대 hover를 쓰지 않는다. hover는 면 색만 바꾼다.
- 이렇게 하지 않기 진척률·점수 같은 지표를 카드 설명에 넣지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
variant? | 'plain' | 'elevated' | 'filled' | plain | 면 스타일. 기본은 plain(v3-jh의 API·플레이그라운드 불일치를 plain으로 정리). |
padding? | 'none' | 'sm' | 'md' | 'lg' | md | 안쪽 여백 0 / 16 / 24 / 32px. 면 스타일과 독립. |
title? | ReactNode | 온보딩 개선 | 머리글 제목. 카드의 접근 이름(aria-labelledby)이 된다. |
titleOrder? | 2 | 3 | 4 | 3 | 제목 요소 단계(h2–h4). 페이지 계층에 맞춘다. |
description? | ReactNode | 10월 1일 – 10월 18일 · 문서 9개 | 제목 아래 한 문장. 사실(기간·개수)만 쓴다. |
href? | string | | 있으면 상호작용 카드. 제목만 링크이고 ::after로 카드 전체를 덮는다. 이때 안쪽 대화형 요소는 0개. |
selected? | boolean | false | 상호작용 카드에서 현재 항목. 링크에 aria-current="true", 테두리 표식. |
footer? | ReactNode | — | 행동 줄(버튼·링크). href와 함께 쓰지 않는다. 미리보기는 버튼 하나. |
children? | ReactNode | 회의록 3개와 메일 6통이 이 프로젝트로 묶였어요. | 본문. |
ref | — | — | ref는 <article>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-*, lang, dir 등 네이티브 article 속성은 그대로 전달된다. className·style은 받지 않는다. |
접근성
키보드: 상호작용 카드: Tab으로 제목 링크, Enter로 이동. 아니면 안쪽 행동에 Tab.
- 제목 링크에 초점이 가면 :has(:focus-visible)로 카드 테두리에 링을 그린다.
- selected는 색만이 아니라 테두리 굵기로도 보인다(forced-colors에서 Highlight).
- href와 footer를 함께 주면 개발 경고를 내고 footer를 그리지 않는다(링크 안 대화형 요소 금지).