카드

제목·설명·액션이 있는 콘텐츠 섹션을 묶는 컨테이너다. 단순한 테두리 박스가 아니라, 하나의 의미 있는 정보 단위를 구성할 때 쓴다. 제목 없는 컨테이너는 Box, 숫자 지표는 StatCard, 엔티티와 복수 지표는 DataStatCard 를 우선 고려한다.

활용 방법

헤더에 제목·설명·보조 액션을 두고, 본문에 핵심 내용을 넣는다.

Preview

이번 달 갱신 대상

3건

₩12.4M

예상 매출

tsx

<Card title="계약" description="이번 달 갱신 대상" action={<Badge tone="warning">3건</Badge>}>
  <div>₩12.4M</div>
  <p>예상 매출</p>
</Card>

footer 는 본문과 분리된 액션 영역이 필요할 때 쓴다.

Preview

외부 연동에 사용

sk_live_••••••••••••

tsx

<Card
  title="API 키"
  description="외부 연동에 사용"
  footer={<Button size="sm">재발급</Button>}
>
  <code>sk_live_••••••</code>
</Card>

밀도 높은 목록은 sm, 일반 섹션은 base, 여유 있는 설정 화면은 lg 를 쓴다.

Preview

조밀한 카드

기본 카드

여유 카드

tsx

<Card title="sm" padding="sm">...</Card>
<Card title="base" padding="base">...</Card>
<Card title="lg" padding="lg">...</Card>