Components
Card Selector
결제 수단·상품 카드를 고르는 선택기입니다. 선택 시 포인트색 링이 생깁니다.
코드 보기
<button class="paycard sel">
<div class="pb">한빛카드</div>
<div class="pn">•••• 6411</div>
</button>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 기본 | 테두리형 → hover 포인트색 | 그린페이•••• 2087 |
| 선택 | 포인트색 테두리 + 3px 링 | 한빛카드•••• 6411 |
Guidelines
✓ Do
- 카드 번호는 뒷 4자리만 (•••• 6411)
- 단일 선택 — 하나를 고르면 이전 선택 해제
- 새 수단 추가는 마지막에 점선 카드로
✕ Don't
- 실제 카드 디자인·로고를 흉내내지 않는다
- 한 줄에 3장 초과 금지 (넘치면 세로 스택)
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
타일 | 150px / radius 10px | |
선택 | accent 테두리 + primary-muted 링 | |
번호 | tabular-nums |
비교
xapp-02 결제·체크아웃의 핵심 요소. Card Selector vs Radio — 시각 정보가 필요한 선택은 카드형, 텍스트만이면 Radio.