Stats

Metric cards and stat displays with numbers, labels, and change indicators. Perfect for dashboards and data summaries.

Overview

Stats patterns display key metrics at a glance. They combine large numbers with supporting context like labels, change indicators, and icons to help users quickly understand important data.

Key features:

  • Semantic HTML using <figure>, <figcaption>, and <data>
  • Machine-readable values via the value attribute on <data>
  • Trend indicators using data-trend attributes
  • Scoped CSS for minimal class usage
  • Responsive grid layout

Simple Number Grid

A clean grid of stat figures with labels and large numbers. Each stat uses a <figure> element with a <figcaption> for the label and <data> for the machine-readable value.

 <section class="stats"> <figure> <figcaption>Total Users</figcaption> <data value="24521">24,521</data> </figure> <figure> <figcaption>Revenue</figcaption> <data value="48352">$48,352</data> </figure> <figure> <figcaption>Orders</figcaption> <data value="1429">1,429</data> </figure> <figure> <figcaption>Conversion</figcaption> <data value="0.032">3.2%</data> </figure> </section> .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--size-l); } @scope (.stats) { figure { display: flex; flex-direction: column; gap: var(--size-2xs); margin: 0; } figcaption { font-size: var(--font-size-sm); color: var(--color-text-muted); } data { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); } }

With Change Indicators

Stats with trend indicators showing change from a previous period. Uses <small> with a data-trend attribute for semantic color styling. The percentage change is wrapped in a nested <data> element for machine-readability.

 <section class="stats"> <figure> <figcaption>Total Users</figcaption> <data value="24521">24,521</data> <small data-trend="up"> <icon-wc name="trending-up" size="sm"></icon-wc> <data value="0.125">+12.5%</data> vs last month </small> </figure> <figure> <figcaption>Bounce Rate</figcaption> <data value="0.423">42.3%</data> <small data-trend="down"> <icon-wc name="trending-down" size="sm"></icon-wc> <data value="-0.031">-3.1%</data> vs last month </small> </figure> </section> @scope (.stats) { small { display: flex; align-items: center; gap: var(--size-2xs); font-size: var(--font-size-sm); } small[data-trend="up"] { color: var(--color-success); } small[data-trend="down"] { color: var(--color-danger); } small data { font-size: inherit; font-weight: inherit; line-height: inherit; } }

Card-Based Stats

Each stat in its own card container with an icon for visual distinction. Uses data-layout="cluster" on the figure for horizontal layout and <layout-stack> for vertical content stacking.

 <section class="stats"> <layout-card> <figure data-layout="cluster" data-layout-justify="between" data-layout-align="start"> <layout-stack data-layout-gap="2xs"> <figcaption>Total Users</figcaption> <data value="24521">24,521</data> <small data-trend="up"><data value="0.125">+12.5%</data> from last month</small> </layout-stack> <span class="stat-icon"> <icon-wc name="users" size="md"></icon-wc> </span> </figure> </layout-card> <layout-card> <figure data-layout="cluster" data-layout-justify="between" data-layout-align="start"> <layout-stack data-layout-gap="2xs"> <figcaption>Revenue</figcaption> <data value="48352">$48,352</data> <small data-trend="up"><data value="0.082">+8.2%</data> from last month</small> </layout-stack> <span class="stat-icon"> <icon-wc name="dollar-sign" size="md"></icon-wc> </span> </figure> </layout-card> </section> @scope (.stats) { figure { margin: 0; } small data { font-size: inherit; font-weight: inherit; line-height: inherit; } .stat-icon { padding: var(--size-s); background: var(--color-surface-raised); border-radius: var(--radius-m); } }

Semantic Benefits

This pattern uses semantic HTML elements that provide meaning beyond visual presentation:

  • <figure>: Groups the stat as a self-contained unit of content
  • <figcaption>: Provides the label/caption for the figure
  • <data value="">: Contains machine-readable values for parsing by scripts or assistive technologies. The value attribute holds the raw number while the text content shows the formatted display. Can be nested inside <small> to make change percentages machine-readable too
  • <small>: Indicates secondary information (the trend/change indicator)

Usage Notes

  • Machine-readable values: Always include the raw number in the value attribute (e.g., value="24521" for "24,521" or value="0.032" for "3.2%"). Use nested <data> inside trend indicators for machine-readable change values (e.g., <data value="0.125">+12.5%</data>)
  • Color semantics: Use data-trend="up" for positive trends and data-trend="down" for negative trends
  • Accessibility: The semantic structure helps screen readers understand the relationship between labels and values
  • Responsive: The grid automatically adjusts column count based on container width
  • Context: Include context in trend indicators (e.g., "vs last month") so users understand what the change refers to

Related

Data Element

Machine-readable values

Figure Element

Self-contained content

Layout Card

Card container element

Dashboard

Full dashboard layouts with stats