03 · Components · 표현
카드Card
서로 관련 있는 정보를 하나의 시각 단위로 묶는 그릇. 리스트·그리드에서 반복되는 요소의 기본형입니다. 과한 그림자보다 얇은 테두리로 구분합니다.
StableWCAG AA
기본 카드
디자인 원칙
주님의교회 PCL 디자인 시스템을 만드는 6가지 철학.
에디토리얼 밀도 · 접근성 기본 · 타이포 우선 · 브랜드 중립 · 모션 절제 · 성능 우선.
푸터 포함
새 프로젝트 시작
주님의교회 PCL 저장소를 클론해 기본 셋업을 마칩니다.
카드가 독립된 콘텐츠 블록이라면 <article>로, 페이지 일부 구획이라면 <section>로 렌더링하세요 — Card는 as prop으로 선택 가능합니다.
Props API
| Prop | Type | Default | Description |
|---|---|---|---|
as | "div" | "article" | "section" | "div" | 렌더링할 시맨틱 태그. |
padded | boolean | true | 내부 패딩 5(20px) 적용 여부. |
children* | ReactNode | CardHeader · CardTitle · CardDescription · CardFooter 와 조합. |