Components
Stat Card
대시보드의 핵심 수치 타일입니다. 값·증감·라벨로 구성됩니다.
오늘 상담
1,284
▲ 12.4% 어제 대비
자동 해결률
68%
▼ 2.1%p
평균 응답
1.3s
— 변동 없음
코드 보기
<div class="tn-card tn-stat">
<div class="sl">오늘 상담</div>
<div class="sv">1,284</div>
<div class="sd up">▲ 12.4% 어제 대비</div>
</div>Variants
| 이름 | 설명 | 미리보기 |
|---|---|---|
| up | 그린 ▲ | ▲ 12.4% |
| down | 레드 ▼ | ▼ 2.1%p |
| flat | muted — | — 변동 없음 |
Guidelines
✓ Do
- 값은 tabular-nums로 정렬 유지
- 증감엔 비교 기준을 명시 ("어제 대비")
- 한 줄에 3~4타일
✕ Don't
- 타일 안에 차트를 욱여넣지 않는다 (스파크라인은 별도 행)
- 자동 수집 불가능한 지표를 넣지 않는다
Specification
| 속성 | 토큰/값 | 비고 |
|---|---|---|
값 | 1.7rem / 650 / -0.03em | |
증감 | var(--ok)/var(--err) |
비교
Stat vs Table — 핵심 요약 3~4개는 Stat, 상세 비교는 Table.