Unit Content Highlight Stat
The Unit Content – Highlight Stat component showcases a numeric statistic or quick fact along with a headline and text description of the stat. As the name implies, the stat must include a numeral. Button links can be added if more information is needed.
On This Page
Examples
Settings & Features
- Choose a white or light grey background
- Optional stat:
- Number or short, number based phrase
- Serif or sans
- Optional stat label (60 character limit including spaces)
- Headline:
- Heading size of H3 or H4
- 150 character limit (including spaces)
- Linkable
- Optional descriptive text
- Optional button
Working with Content
Good for:
- Making a strong, clear, numeric-based point or stat
- Pulling out key number or data point and displaying it in an eye-catching manner
- Breaking up dense content
- Reinforcing or emphasizing a key message within the page text
- Giving the site user a compelling reason to look further on the page
Avoid if:
- The stat is weak or unimpressive
- Too wordy that it loses impact
- The stat needs lots of context around it so as to not be misleading
- Data is soft, unverifiable or outdated
- Isolated number disrupts flow of page
Best Practices
- Keep the number large and the label short rather than including a full sentence.
- Don’t overload the page with too many stats so they maintain their visual impact.
- Include context around the number or fact so it makes sense to the site user.
Usability & Guidelines
- Adjust heading size to maintain proper page hierarchy for improved accessibility.
Alternative Options
If a highlight stat is so large it overwhelms the page or there are so many that the user will tune them out, consider another type of component for better usability, accessibility and maintenance.
| Content Need | Recommended Component |
|---|---|
| Requires added or expanded information for context | Standard content page structure with proper heading hierarchy |