Card

카드 컨테이너

기본

Card Title

Card Description

카드 본문 내용입니다.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>카드 본문 내용입니다.</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Header만 있는 카드

간단한 카드

Description만 있는 카드

<Card>
  <CardHeader>
    <CardTitle>간단한 카드</CardTitle>
    <CardDescription>Description만 있는 카드</CardDescription>
  </CardHeader>
</Card>

Footer 버튼

확인이 필요합니다

이 작업을 계속하시겠습니까?

<Card>
  <CardHeader>
    <CardTitle>확인이 필요합니다</CardTitle>
  </CardHeader>
  <CardContent>
    <p>이 작업을 계속하시겠습니까?</p>
  </CardContent>
  <CardFooter className="flex gap-2">
    <Button variant="outline" className="flex-1">취소</Button>
    <Button className="flex-1">확인</Button>
  </CardFooter>
</Card>

컴포넌트 구조

컴포넌트	설명	필수 여부
Card	카드 컨테이너	✅ 필수
CardHeader	제목 영역	선택
CardTitle	카드 제목	선택
CardDescription	카드 설명	선택
CardContent	본문 내용	선택
CardFooter	하단 액션 영역	선택