Statistic
Display-number block with leading label and trailing description.
A .statistic is a vertical stack: small leading label → large display number → body description. Use to surface high-impact metrics in a marketing page. Group multiple into your own grid for a row of stats.
Install
import "elements-kit/ui/styles.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/marketing/marketing.css";API
<div class="statistic">
<p data-leading>Up to</p>
<p data-heading>75%</p>
<p data-description>faster builds across the org.</p>
</div>| Element | Notes |
|---|---|
[data-leading] | Small label above the number. Optional. |
[data-heading] | Display number (48px × scaling, up to --font-size-9 at lg). |
[data-description] | Body sentence below. |
| Attribute | Values |
|---|---|
data-size | 1 (small), default (medium), 3 (large display) |
data-align | start (default), center |
Sizes mirror .x-button — data-size="1" for inline / dense rows, no attribute for the standard section-level stat, data-size="3" for hero-tier display numbers (weight 550, tight tracking, scales via --scaling).
Grouping
To align multiple statistics in a row, wrap them in your own grid — there's no .statistic-row primitive:
<div style="display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem">
<div class="statistic">…</div>
<div class="statistic">…</div>
<div class="statistic">…</div>
</div>Tips
Do
Keep the numbers comparable in magnitude (all percentages, or all counts) within a row.
Don't
Use [data-heading] for long phrases. It's a display slot for a number or 1–2 words.