Statistic¶
Placeable in Canvas
A single stat — animated count-up numeral, icon and label. Drop several into one row to build a band.
Usage
Loading…Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
icon_name |
Optional | string | Choose an icon. Used instead of the icon image if both are set. | |
icon_image |
Optional | object or string | An image to use as the icon. | |
title |
Optional | string | The label for the number. | Projects Completed |
prefix |
Optional | string | Only for money or signed values, e.g. '$'. Leave empty for plain counts. | |
number |
Optional | integer | The number to count up to. Defaults to 0. |
500 |
suffix |
Optional | string | Shown after the number, e.g. '%' or '+'. | + |
body |
Optional | string | Optional text below the number. | Since 2020 |
color_scheme |
Optional | enum | Dark puts this on a dark background with light text. Defaults to light. |
light, dark |
layout |
Optional | enum | Stacked puts everything in one column. Compact puts the text beside the number. Defaults to stacked. |
stacked, compact |
heading_level |
Optional | enum | Heading level for the label; h3 suits most sections. Defaults to h3. |
h2, h3, h4, h5, h6 |
animate |
Optional | boolean | Count up to the number when it scrolls into view. Defaults to true. |
true |
duration |
Optional | integer | How long the count-up takes, in milliseconds. Defaults to 3000. |
3000 |
Built on the shared Icon Media partial.
With reduced motion the final number shows at once — and the real number is in the markup from the start, so it's never announced as 0. → Full accessibility guidelines
Tokens used by this component
| Token | Default |
|---|---|
--statistic-item-count-* |
(several — see full reference) |
--statistic-item-divider |
1px solid var(--theme-color-border, var(--bs-border-color, #dee2e6)) |
--statistic-item-icon-color |
(unset — var(--theme-color-primary, var(--bs-primary, currentcolor)) until a theme sets it) |
--statistic-item-icon-size |
2rem |
--statistic-item-padding-block |
clamp(1.5rem, 0.6rem + 2.4vw, 2.75rem) |
--statistic-item-padding-inline |
clamp(1rem, 2vw, 2rem) |
--statistic-item-text-color |
var(--theme-color-ink-muted, var(--bs-secondary-color, inherit)) |
--statistic-item-title-size |
1.125rem |
--statistic-item-title-weight |
600 |
The numeral colour is a token
--statistic-item-count-color defaults to inherit. It is declared on .statistic-item, so an override has to land on that same element — setting it at :root will never win.