사용법
헤더 포함
title과 description으로 카드 상단에 맥락을 제공해요.
문서 초안
마지막 수정 2시간 전
제안서 섹션 3개가 작성됐어요.
본문만
padding으로 본문 여백을 조절할 수 있어요. 헤더 없이 콘텐츠만 배치할 때 사용해요.
패딩 lg
헤더 없이 본문만 배치할 수 있어요.
스타일 커스터마이징
Card 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Card
className="shadow-md"
style={{
--gtd-card-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Card
classNames={{
root: "my-card-root",
header: "my-card-header",
title: "my-card-title",
description: "my-card-description",
body: "my-card-body"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-card-bg | 카드 배경 |
| --gtd-card-border-color | 테두리색 |
| --gtd-card-radius | 모서리 반경 |
인터페이스
CardProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| title | string | — | 카드 헤더 제목 |
| description | string | — | 헤더 부제 |
| padding | "none" | "md" | "lg" | md | 본문 패딩 |
Card 컴포넌트 Props 표
가져오기
import { Card } from "@/components/ui/Card";