컴포넌트 · 데이터 표시
Card
관련 정보를 하나의 단위로 묶는 컨테이너입니다. 기본은 테두리 없이 은은한 배경색(filled)으로 구획하고, 배경이 이미 회색이거나 떠 있는 느낌이 필요할 때만 elevated를 씁니다.
Variant
filled
정산 예정 금액
1,284,000원
elevated
정산 예정 금액
1,284,000원
outline
정산 예정 금액
1,284,000원
ghost
정산 예정 금액
1,284,000원
구성 예시
업무용 — 헤더 + 액션 + 콘텐츠
이번 달 정산
2026.09.01 – 09.30
38,420,500원
지급 완료72%
- 결제 수수료
- −845,251원
- 다음 지급일
- 10월 1일 (목)
선정산 신청
NEW오늘 매출을 내일 바로 받아보세요
고객 접점 — 결제 수단 카드
대표 결제 수단
삼성카드 taptap O
5310 •••• •••• 1234
사용 규칙
이렇게 하세요
- 흰 배경 위에서는 filled(은은한 배경색)로 구획
- 회색 배경 위에서는 elevated(흰 카드 + 그림자)
- 카드 전체가 클릭되면 interactive + chevron
- 카드 안 Primary 버튼은 최대 1개
이렇게 하지 마세요
- 카드 좌측 · 상단에 색 선(accent bar)으로 강조
- 카드 안에 카드 중첩 (Divider · 배경색으로 구획)
- outline과 shadow 동시 사용
- 카드마다 다른 라운드 값