StatList

Key figures as a description list: each item pairs a figure with what it counts, an optional total and a short note.

Status: beta. Group: display. Markdown version: /design-system/components/stat-list.md

When to use

Key figures as a description list: each item pairs a figure with what it counts, an optional total and a short note.

Do not animate figures counting up; the figure is the content, not a decoration.
Do not put more than a short qualifier in the note; long explanations belong in the text around the list.
Do not use it for tables of several values per row; use Table.

StatList props
Prop	Type	Default	Description	Required
`items`	`StatListItem[]`	none	Figures in reading order.	Yes
`variant`	`"card" \| "rule"`	`rule`	"rule" sets each figure under a hairline, for figures inside running content; "card" puts each on a surface tile, for a standalone band.	No
`size`	`"md" \| "lg"`	`md`	Figure size: md for rows of four or more, lg for two or three.	No
`align`	`"center" \| "start"`	`start`	Text alignment inside each item.	No
`className`	`string`	none	Merged onto the dl element.	No

The contract records no invalid combinations.

StatList keyboard behaviour
Key	Behaviour
General	Not interactive.

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

StatList rules
Level	Rule	How it is checked
MUST	ARIA: Renders a <dl>; each item is a <dt> label followed by a <dd> figure and an optional <dd> note, so the label is read before the figure.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The figure is drawn above the label with CSS order only; reading order is unchanged.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-10-30.

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { StatList } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/content exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.