Components
Card
관련된 정보를 그룹화하여 보여주는 컨테이너 컴포넌트입니다.
Card
콘텐츠를 논리적인 단위로 묶어 가독성을 높여주는 다목적 컨테이너입니다.
Examples
Create project
Deploy your new project in one-click.
Project Content Area
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@seoulpi/ui/card";
import { Button } from "@seoulpi/ui/button";
function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>Card content goes here.</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
);
}Sub-components
- CardHeader: 카드의 제목 및 메타 정보를 포함
- CardTitle: 카드의 메인 제목
- CardDescription: 제목을 보완하는 설명
- CardContent: 카드의 실제 본문 내용
- CardFooter: 액션 버튼 등을 포함하는 하단 영역