Card

콘텐츠를 묶는 기본 카드 컨테이너입니다.

데모

프로 플랜

팀 협업에 필요한 기능을 모두 제공합니다.

29,000원 / 월

멤버 최대 20명, 무제한 프로젝트, 우선 지원을 포함합니다.

코드

<Card>
  <CardHeader>
    <CardTitle>프로 플랜</CardTitle>
    <CardDescription>팀 협업에 필요한 기능을 모두 제공합니다.</CardDescription>
    <CardAction>
      <Button variant="outline" size="sm">비교하기</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>29,000원 / 월</p>
    <p>멤버 최대 20명, 무제한 프로젝트, 우선 지원을 포함합니다.</p>
  </CardContent>
  <CardFooter>
    <Button className="w-full">구독 시작하기</Button>
  </CardFooter>
</Card>

사용 규칙

CardHeader에 제목·설명·보조 액션을 함께 두어 스캔하기 쉬운 정보 위계를 만든다.
카드 안 여백은 --card-spacing 토큰을 따르는 CardContent/CardFooter를 사용해 통일한다.
카드 전체가 하나의 클릭 대상이면 CardAction 대신 카드 자체를 링크로 감싼다.

Don't

CardFooter 없이 버튼을 CardContent 안에 임의 마진으로 붙이지 않는다.
카드 배경을 className으로 직접 칠해 다크 모드 대비를 깨지 않는다.