03 · Components · 표현

카드Card

서로 관련 있는 정보를 하나의 시각 단위로 묶는 그릇. 리스트·그리드에서 반복되는 요소의 기본형입니다. 과한 그림자보다 얇은 테두리로 구분합니다.

StableWCAG AA

기본 카드

tsx

<Card>
  <CardHeader>
    <CardTitle>디자인 원칙</CardTitle>
    <CardDescription>주님의교회 PCL 디자인 시스템을 만드는 6가지 철학.</CardDescription>
  </CardHeader>
  <p className="text-[13.5px] leading-[1.7] text-[color:var(--color-text-muted)]">
    에디토리얼 밀도 · 접근성 기본 · 타이포 우선 · 브랜드 중립 · 모션 절제 · 성능 우선.
  </p>
</Card>

미리보기

디자인 원칙

주님의교회 PCL 디자인 시스템을 만드는 6가지 철학.

에디토리얼 밀도 · 접근성 기본 · 타이포 우선 · 브랜드 중립 · 모션 절제 · 성능 우선.

푸터 포함

tsx

<Card>
  <CardHeader>
    <CardTitle>새 프로젝트 시작</CardTitle>
    <CardDescription>주님의교회 PCL 저장소를 클론해 기본 셋업을 마칩니다.</CardDescription>
  </CardHeader>
  <CardFooter>
    <Button size="sm" variant="primary">시작</Button>
    <Button size="sm" variant="ghost">자세히</Button>
  </CardFooter>
</Card>

미리보기

새 프로젝트 시작

주님의교회 PCL 저장소를 클론해 기본 셋업을 마칩니다.

Props API