Components
Rank Bars
순위가 있는 항목 리스트를 값 비율에 따른 마이크로 바로 함께 보여줍니다. hover 시 강조색으로 전환됩니다. Top N 리스트에 적합합니다.
환불·교환32%
예약 변경24%
배송 조회18%
제품 문의14%
위 미리보기는 이미지가 아니라 실제 코드입니다 — 눌러 보고, 올려 보세요.
코드 보기
<div class="tn-rank-item">
<div class="tn-rank-head"><span class="tn-rank-name">환불·교환</span><span class="tn-rank-val">32%</span></div>
<div class="tn-rank-track"><div class="tn-rank-seg on"></div>...</div>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| 기본 | 이름 + 값 + 마이크로 바 | 배송 조회18% |
| 낮은 비중 | 세그먼트 채움이 적은 하위 항목 | 영수증·기타12% |
| 구분선 없이 압축 | border-bottom 제거 · 카드 내 좁은 폭 | 제품 문의14% |
Guidelines
✓ Do
- 4~6개 항목 이내 (Top N 리스트)
- 값은 %·건수 등 단위와 함께 우측 정렬
- hover로 이름+바가 함께 강조되게
✕ Don't
- 트랙 세그먼트 개수를 항목마다 다르게 하지 않는다 (비교 왜곡)
- 순위 배지(1,2,3) 없이 등수 강조 금지 — 정렬 순서로 충분
- 막대 색을 항목마다 다르게 칠하지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
세그먼트 수 | 24 (고정) | |
트랙 높이 | 6px (hover 10px) | |
gap | 2px | |
구분선 | 1px solid var(--border) | 마지막 항목 제외 |
비교
Insight 'Top 인텐트' 실물에서 추출. Rank Bars vs Bar Chart — 항목별 순위 나열은 Rank Bars, 시계열 추이는 Bar Chart.