Overview
The Stats component displays a row of visually engaging statistics, each with a sticker graphic, a bold number, and a short descriptive label. An optional note can be added below the group for attribution or context.
Common uses
- Display program metrics or impact statistics
- Highlight fast facts on a landing or about page
- Showcase achievements, outcomes, or growth indicators
- Present data points that support storytelling or marketing
Component example
Component fields
| Element name | Required | Multiple |
|---|---|---|
|
Stat
Group containing fields for a single stat. Add between 2 and 4 stats.
|
Yes
|
Yes
|
|
Sticker ID
ID for the sticker above the stat. Visit the Rivet website for a complete list of stickers.
|
Yes
|
No
|
|
Number
Stat value. Include commas for large numbers and "%" for percentages.
|
Yes
|
No
|
|
Label
Short descriptive text displayed below the number. Limit to a few words.
|
Yes
|
No
|
|
Note
Optional. Text displayed beneath the full row of stats (for example, source or context). Do not include an asterisk.
|
No
|
No
|
|
Advanced settings
See Advanced Component Fields.
|
No
|
No
|
Accessibility
-
Provide clear labels for each statMake sure each number includes a short label so users understand what the value represents.
-
Include context when neededUse the note field to explain data sources, timeframes, or limitations.
-
Avoid relying on visuals aloneStickers support the content, but the meaning should come from the number and label.
Do
- Use to highlight compelling metrics in a bold, visual way
- Keep numbers short and scannable, using commas or percentages where appropriate
- Write concise labels that clearly explain what the number represents
- Choose stickers that reinforce the theme or context of the stat
- Use the note field for attribution or context (e.g., "Based on 2024 enrollment data")
Don't
- Use more than one stats component on a page
- Use long numbers or labels
- Use to present tabular or reference data—use a table instead