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
valueattribute on<data> - Trend indicators using
data-trendattributes - 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-error); } 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. Thevalueattribute 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
valueattribute (e.g.,value="24521"for "24,521" orvalue="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 anddata-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