Stat

A labelled metric and a scrollable group of metrics. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• stat-group, stat-group--vertical, stat-group--horizontal, stat, stat-title, stat-value, stat-description, stat-figure
• stat-actions

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div class="stat-group focus-ring max-w:100%" role="region" tabindex="0" aria-label="Project metrics">
  <div class="stat"><span class="stat-title">Active projects</span><strong class="stat-value">12</strong></div>
  <div class="stat"><span class="stat-title">Deployments</span><strong class="stat-value">36</strong></div>
</div>

Variants and composition

stat-group–horizontal and stat-group–vertical arrange multiple stat blocks. Each block can compose title, value, description, figure, and actions.

Behavior and accessibility

A horizontal metric group may overflow. Name and keyboard-enable its scroll region; label each metric and keep decorative figures hidden from assistive technology.

The group preserves each metric’s content width instead of squeezing its value. Bound the group with an available width and verify that keyboard focus remains visible while scrolling. Use stat-description for supporting text beneath the metric.

Reference

See the interactive Storybook specimen ↗. Continue to Status or return to the Official preset overview.