ProofBlock

Metrics band that presents headline numbers with labels under a required title and an optional subtitle and caption, with tight spacing and dark metric cards.

Status: stable. Group: structure. Markdown version: /design-system/components/proof-block.md

When to use

ProofBlock is the numbers band: a set of headline metrics with labels under a required title and an optional subtitle; an optional caption sits in the header beside the title, above the metrics. tight narrows the gap between metric cards and dark switches each metric card to the dark treatment (the band itself does not change). Use it to evidence outcomes on case-study or marketing pages; metrics are data props so copy stays with the page.

When not to use

The contract records no forbidden uses.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

ProofBlock props
Prop	Type	Default	Description	Required
`ariaLabel`	`string`	none	Accessible name for the proof section landmark.	No
`title`	`string`	none	Section heading.	Yes
`subTitle`	`string`	none	Supporting line under the title.	No
`caption`	`string`	none	Small print in the header, beside the title block and above the metrics grid (source, timeframe).	No
`metrics`	`ProofMetric[]`	none	Proof metrics: value + label pairs.	Yes
`tight`	`boolean`	`false`	Tighten the gap between metric cards. The band padding is unchanged.	No
`dark`	`boolean`	`false`	Apply the dark treatment to each metric card. The section band itself is unchanged.	No
`className`	`string`	none	Additional CSS classes on the section.	No

Variants

No variant dimensions and no props with a fixed set of values.

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

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

ProofBlock rules
Level	Rule	How it is checked
MUST	ARIA: Renders a section named by ariaLabel, falling back to title. The title is the only heading (h2); metric values are plain text read with their labels, so heading navigation never lists bare numbers.	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	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-11-04.
MUST NOT	Maintainers: Do not bypass design tokens or skip forced-colors verification at beta.	Release review; not machine-checked.

Install and import

In-repo only. ProofBlock is not exported from @digitaltableteur/react, so there is no public import path.