Stat

The .c-stat component displays a single metric for dashboards. A label, a large value with optional unit, a trend indicator (up/down/flat with arrow glyph - colorblind-safe), and an optional sparkline slot.

Semantic HTML

<div class="c-stat">
  <span class="c-stat__label">Monthly revenue</span>
  <div class="c-stat__value">$48,200<span class="c-stat__unit">/mo</span></div>
  <span class="c-stat__trend" data-direction="up">12.4% vs last month</span>
</div>

Tone variants on the value

Apply data-tone on .c-stat__value to colour the number itself — consistent with c-badge, c-alert, and c-toast. Useful for dashboards that need to highlight thresholds (e.g. overdue counts in danger):

<div class="c-stat__value" data-tone="danger">
  12<span class="c-stat__unit">overdue</span>
</div>

Valid tones: success, warning, danger. Omit for default text colour.

Class contract

Selector	Role
`.c-stat`	The container (flex column).
`.c-stat__label`	Muted label.
`.c-stat__value`	Large number (`tabular-nums`, `letter-spacing: -0.02em`).
`.c-stat__value[data-tone]`	Tone the number: `success`, `warning`, `danger`.
`.c-stat__unit`	Inline unit suffix (smaller, muted).
`.c-stat__trend`	Trend with arrow (`data-direction="up\|down\|flat"`).
`.c-stat__spark`	Optional inline SVG sparkline slot.

Accessibility

The trend arrow is always present via ::before content, so color is not the sole signal of direction (WCAG 1.4.1). Up = success-text, down = danger-text, flat = text-muted.