Statistic

Examples

A Statistic pairs a large .stat__number with a quiet .stat__label. Add .stat__number--gradient to clip the signature radial violet→ink fill onto the figure, reserve it for the one hero stat.

<div class="stat"><span class="stat__number">+38%</span><span class="stat__label">Average conversion lift</span></div>

<div class="stat"><span class="stat__number stat__number--gradient">2.4M</span><span class="stat__label">Experiments run</span></div>

Usage

Statistics turn a result into a glanceable figure. Keep them spare so the number does the work.

• Use the gradient on exactly one highlighted stat at a time, it's the hero figure, not a default.
• Keep numbers short: use M / K / % shorthand, not full digits.
• Pair every number with a .stat__label, a figure without context means nothing.
• Don't put gradient stats on dark backgrounds; the violet→ink clip needs a light surface to read.

States

Statistic is static: it has no interactive states. The figure simply renders, with or without the gradient treatment.

Code

The .stat classes ship in statistic.css. Add the stylesheet, then render the figure and its label.

<link rel="stylesheet" href="/_shared/components/statistic.css">

<div class="stat"><span class="stat__number">+38%</span><span class="stat__label">Average conversion lift</span></div>

<div class="stat"><span class="stat__number stat__number--gradient">2.4M</span><span class="stat__label">Experiments run</span></div>