카드
Betelgeuse 의 카드는 두꺼운 테두리와 하드 섀도로 콘텐츠 덩어리를 만든다. 정보 컨테이너 자체가 강한 그래픽 오브젝트처럼 보이도록 설계한다.
활용 방법
섹션 카드
상단 헤더와 본문을 굵은 구획으로 나눈다.
Preview
Launch
Ready
Now
3 Missions
Queued for deploy
tsx
<Card title="Launch" description="Ready" action={<Badge>Now</Badge>}>...</Card>
스타일 원칙
- · 컨테이너도 버튼처럼 물성을 가진다.
- · 헤더 배경은 강하게 나누고 본문은 단순하게 둔다.
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| title | ReactNode | - | 상단 제목 |
| description | ReactNode | - | 보조 설명 |
| action | ReactNode | - | 우측 액션/상태 |
| children | ReactNode | - | 본문 |