Card

콘텐츠를 그룹화하는 카드 컴포넌트입니다.

Import


import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@choblue/ui/card'

기본 사용

작업 확인

계속 진행하시겠습니까?

이 작업은 되돌릴 수 없습니다. 계속하려면 확인을 눌러주세요.


<Card>
  <CardHeader>
    <CardTitle>카드 제목</CardTitle>
    <CardDescription>카드 설명입니다.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>카드 본문 내용입니다.</p>
  </CardContent>
  <CardFooter className="gap-2">
    <Button variant="outline" size="sm" className="flex-1">취소</Button>
    <Button size="sm" className="flex-1">확인</Button>
  </CardFooter>
</Card>

서브 컴포넌트

컴포넌트	설명
`Card`	최상위 컨테이너
`CardHeader`	헤더 영역
`CardTitle`	제목 (`h3`)
`CardDescription`	설명 텍스트
`CardContent`	본문 영역
`CardFooter`	하단 액션 영역