STAT-TILE

Source: design-system/components/StatTile/StatTile.tsx. React Server Component, zero client JavaScript.

Props

Prop	Type	Default	Required
Prop`value`	Type`string`	Defaultnone	Requiredyes
Prop`label`	Type`string`	Defaultnone	Requiredyes
Prop`variant`	Type`'default' \| 'compact' \| 'display'`	Default`'default'`	Requiredno

Variants

LH_SCORE: 99

YRS_EXP: 5+

LCP: 1.2s

SOURCE

<StatTile value="99" label="LH_SCORE" variant="display" />
  <StatTile value="5+" label="YRS_EXP" />
  <StatTile value="1.2s" label="LCP" variant="compact" />

Grid layout stays in the consumer; the tile carries no layout opinion.

Accessibility

Renders <dl><dt>label</dt><dd>value</dd></dl>. The value is ordered first visually, so assistive technology reads "label: value".