STAT: Single-figure statistic widgets
VARIANTS: Number | Donut

Consolidated entry for statistic display. Number is the label-above-value widget; Donut is the percentage ring used for comparison figures.

COMPONENT: Stat
VARIANTS: default | inline | lg | chip + .stat-row grouping

Label-above-value statistic widget. Used on school/course/career detail pages for key facts.

Single stat

Students 2,100
<div class="stat"><span class="stat-label">Students</span><span class="stat-value">2,100</span></div>

Stat with icon prefix

Location 0.5 mi

Stat row (grouped, no divider)

Type Sixth Form
Students 2,100
A* – B 62%
Distance 0.5 mi

Stat row (with top-border divider)

Use .stat-row-bordered to add a top border + 12px padding (common in detail-page summary sections).

Key facts for this provider, shown above the bordered stat row.

Students 2,100
A* – B 62%
Distance 0.5 mi

Inline variant

Label and value side-by-side instead of stacked. Lighter weight label (medium, not bold; not uppercase). Useful for compact list contexts.

Type: Sixth Form
Students: 2,100
A* – B: 62%

Large variant (hero summary)

Use .stat-lg to make values larger (heading-5 size). For detail-page hero summaries.

Students 2,100
A* – B 62%
Ofsted Outstanding

Quick-fact chips

Chip (.stat-chip): bordered tile with tinted icon square — quick-fact grids on profile pages.

Boarding Type No Boarder
School Type Foundation School
Suitable Ages 11 to 19
Gender Mixed
<div class="stat stat-chip"><span class="stat-icon">…</span><span>label + value</span></div>

COMPONENT: Donut Stat — read-only percentage ring with centred value text
VARIANTS: blue (default) | magenta | orange | green · default (72px) | sm (44px)

A conic-gradient ring driven by donut_stat_controller.js, which sets --donut-value as a percent string (e.g. "92%") from the data-donut-stat-value-value attribute — mirroring the progress bar's --progress-value mechanism. The numeric value is always duplicated as visible text inside .donut-stat-value; no inline styles are needed in the HTML.

Default size + color variants

Colors: blue = School series (default), magenta = England comparison, orange/green = accents.

School
England
Orange
Green
<div class="donut-stat" data-controller="donut-stat" data-donut-stat-value-value="92" role="img" aria-label="School: 92%"><span class="donut-stat-value">92%</span></div>

Small variant (inline rows)

Small (.donut-stat-sm): 44px ring for inline catchment rows — pair with text on the right.

Pupils are from within 0.52 miles
Pupils are from 0.52 – 0.6 miles
<div class="donut-stat donut-stat-sm donut-stat-magenta" data-controller="donut-stat" data-donut-stat-value-value="70" role="img" aria-label="70%"><span class="donut-stat-value">70%</span></div>