Card
의미 있는 섹션, 높이감, 내부 여백을 갖춘 구조화된 콘텐츠 표면이에요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | default, outlined, elevated | default |
padding | none, sm, md, lg | md |
| parts | Root, Header, Title, Description, Content, Footer | compound API |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/card.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRCard } from '@tinyrack/ui/components/card';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
내부 여백 고유 링크
콘텐츠 밀도에 맞춰 padding을 선택하세요. 자식이 카드 가장자리에 닿아야 할 때만 none을 사용하세요.
끝까지 확장되는 media 고유 링크
media가 card 경계에 닿아야 하면 바깥 card에는 padding none을 사용하고 semantic section에 spacing을 두세요.
semantic article과 heading 고유 링크
render prop은 래퍼 노드를 추가하지 않고 기본 요소를 바꿔요. 주변 페이지의 제목 수준에 맞추세요.
API
| 파트 | 기본 요소 | 주요 prop |
|---|---|---|
TRCard.Root | div | variant, padding, render |
TRCard.Header | header | 네이티브 header prop |
TRCard.Title | h2 | 문맥에 맞는 heading level을 위한 render |
TRCard.Description | p | 네이티브 paragraph prop |
TRCard.Content | div | 네이티브 div prop |
TRCard.Footer | footer | 네이티브 footer prop |
TRCard.Root와 TRCard.Title은 래퍼 노드를 새로 만들지 않고 기존 요소에 얹는 Base UI의 render 규약을 지원해요. 모든 파트는 className을 병합하고 네이티브 prop과 ref를 전달하며 사용자 스타일을 받아요. Card를 조합할 때 제목의 문서 순서를 지키고, 자식이 카드 가장자리에 닿아야 할 때만 padding="none"을 사용하세요.