Stat

Usage

Use a stat to show one key number on a dashboard: fleet uptime, overdue services, mean time to repair. Group three to five in a .stat-group. Use a chart when the shape over time matters more than the current value, and a table for many numbers.

• Basic — label, value, unit.
• With trend — a delta pill with an arrow and words. Tone follows meaning: more uptime is good, more overdue services is bad.
• With sparkline — a small trend line; decorative, the delta text says the trend.
• Loading — keep the label; skeletons replace value and delta.

Content: label says what and over which period ("Fleet uptime, last 7 days"). Deltas are full phrases with the comparison: "Up 1.2 points vs last week". Round to what people act on (97.4%, not 97.4183%).

Anatomy

1. Container — .stat
2. Label — dt.stat__label
3. Value — dd.stat__value with tabular numerals, plus .stat__unit
4. Delta (optional) — .stat__delta--good|bad|flat: arrow icon + text
5. Note (optional) — .stat__note
6. Sparkline (optional) — svg.stat__sparkline, aria-hidden

Examples

States marked hover and focus-visible are frozen with .is-hover and .is-focus-visible. Those classes share their rule with the real pseudo-class; never use them in product code.

<div class="stat">
  <dl class="stat__body">
    <dt class="stat__label">Fleet uptime, last 7 days</dt>
    <dd class="stat__value">97.4<span class="stat__unit">%</span></dd>
  </dl>
  <p class="stat__delta stat__delta--good"><svg class="" aria-hidden="true" focusable="false"><use href="#icon-arrow-up"></use></svg>Up 1.2 points vs last week</p>
</div>

<div class="stat" aria-busy="true">
  <p class="stat__label">Parts spend, this month</p>
  <span class="stat__skeleton stat__skeleton--value" aria-hidden="true"></span>
  <span class="stat__skeleton stat__skeleton--delta" aria-hidden="true"></span>
  <span class="sr-only">Loading parts spend</span>
</div>

API

Do and don't

Accessibility

Stats are static; no keyboard behavior.

• Label and value are a dt/dd pair, read as "Fleet uptime, last 7 days: 97.4 %".
• The delta's direction is in words ("Up", "Down"); the arrow is aria-hidden and the tone color is never the only signal.
• Sparklines are aria-hidden; the delta text carries the trend. Link to the full chart or table for details.
• Loading: aria-busy="true" plus an .sr-only "Loading parts spend". When the value arrives, don't announce it unless the user asked for the refresh.
• Contrast: delta pills use contrast-checked feedback.*.fg/feedback.*.bg pairs.

Tokens