Stat

A stat presents one key figure: a label, a prominent value, and an optional trend delta and description. CSS-only. The value uses tabular figures so digits line up when stats stack into a row. See Accessibility for how the trend stays legible without relying on colour.

Basic

Total users 12,486

<div class="re-stat">
  <span class="re-stat__label">Total users</span>
  <span class="re-stat__value">12,486</span>
</div>

With a trend

data-trend="up" / "down" / "flat" colours the delta and prepends a direction arrow (↑ ↓ →). The arrow is decorative — always include a .re-sr-only direction word so assistive tech announces the direction too.

Monthly revenue $48,200 12% vs last month

<div class="re-stat">
  <span class="re-stat__label">Monthly revenue</span>
  <span class="re-stat__value">$48,200</span>
  <span class="re-stat__trend" data-trend="up">
    <span class="re-sr-only">Trending up </span>12% vs last month
  </span>
</div>

A stats bar

Wrap stats in .re-stat-group for an evenly-spaced row; add data-divided for separators between them.

Revenue $48,200 12%

Refunds $1,940 3%

Active plans 2,310 0%

<div class="re-stat-group" data-divided>
  <div class="re-stat">
    <span class="re-stat__label">Revenue</span>
    <span class="re-stat__value">$48,200</span>
    <span class="re-stat__trend" data-trend="up">
      <span class="re-sr-only">Trending up </span>12%
    </span>
  </div>
  <div class="re-stat">
    <span class="re-stat__label">Refunds</span>
    <span class="re-stat__value">$1,940</span>
    <span class="re-stat__trend" data-trend="down">
      <span class="re-sr-only">Trending down </span>3%
    </span>
  </div>
  <div class="re-stat">
    <span class="re-stat__label">Active plans</span>
    <span class="re-stat__value">2,310</span>
    <span class="re-stat__trend" data-trend="flat">
      <span class="re-sr-only">No change </span>0%
    </span>
  </div>
</div>

Compact & centered

data-size="sm" shrinks the value for dense dashboards; data-align="center" centers the column. A .re-stat__description adds a secondary note.

Uptime 99.98% Last 90 days

<div class="re-stat" data-size="sm" data-align="center">
  <span class="re-stat__label">Uptime</span>
  <span class="re-stat__value">99.98%</span>
  <span class="re-stat__description">Last 90 days</span>
</div>

Accessibility

The stat is CSS-only — a passive container with no interactive behaviour. Label and value are plain text read in document order (label first), so author them in that order.

Trend direction never depends on colour alone (WCAG 1.4.1). It is carried three ways: the success/danger/muted colour, a leading arrow glyph (↑ ↓ → — a shape that still distinguishes the directions under Windows High Contrast, where colour flattens), and an author-supplied .re-sr-only direction word inside the trend (Trending up, Trending down, No change). Always include that sr-only text: the arrow is a CSS ::before glyph, which assistive tech does not reliably announce.
Value semantics — the value is plain text. If it needs a unit or context for screen readers that the visual layout implies, put it in the value or the label rather than relying on proximity alone.
No forced-colors override is needed — because the arrow shape and sr-only text carry the meaning, the colour is pure enhancement; nothing is lost when the UA flattens it.

See the accessibility guide for the project-wide stance.