Card
관련 있는 내용을 하나의 상자로 묶어요. Header, Body, Footer 순서예요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
Card title
한 줄 설명
콘텐츠 영역. 인스턴스에서 교체해요.
사용법
- 그림자 대신 테두리bg/surface + 1px border/default + radius/lg, padding space/5, 영역 사이 space/4.
- 이름 있는 exportCard.Header가 아니라 CardHeader를 써요. 서버 컴포넌트에서 점 접근이 깨지기 때문이에요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| CardHeader | CardTitle + CardDescription, 안 간격 space/1 | — |
| CardBody | 본문 | — |
| CardFooter | 오른쪽 정렬 버튼 묶음, 버튼 사이 space/2 | — |
코드
tsx
<Card>
<CardHeader><CardTitle>API 키</CardTitle><CardDescription>…</CardDescription></CardHeader>
<CardBody>…</CardBody>
<CardFooter><Button variant="secondary">취소</Button><Button>저장</Button></CardFooter>
</Card>