Stats / Metrics

Numerical data display component using the stat class. Clean, accessible metric cards for dashboards and overview pages.

Default Stats

73 Components
149 Tokens
13.3 KB gzipped 
<article class="stat">
  <span class="value">73</span>
  <span class="label">Components</span>
</article>

With Icon and Meta

24,891 Active Users

↑ 12% from last month

$48.2k Revenue

This month

<article class="stat">
  <span class="axicon render" data-name="Users"></span>
  <span class="value">24,891</span>
  <span class="label">Active Users</span>
  <p>↑ 12% from last month</p>
</article>

Semantic Structure

ElementRoleUse
article.statRootContainer — use article for self-contained data
span.valueNumberThe main metric — large, prominent
span.labelLabelWhat the number represents
pContextTrend, timeframe, comparison
span.axiconIcon (optional)Place before value for visual category

Accessibility

  • Wrap in a <section aria-label="Key Metrics">
  • Each article.stat is self-contained — screen readers treat it independently
  • Include trend info in the visible stat-meta — don't use color alone
  • Consider aria-label on the value if the label follows: <span class="value" aria-label="24891 active users">

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Stats component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.