Stats Cards

Purpose of the Stats Card

Highlight key metrics or data in a prominent format.

This component emphasizes numerical information to support credibility, impact, or scale within a page.

Stats Card component in layout — *Example page context showing where Stats Cards are typically used*

✓ Use this component when:

You need to showcase clear, concise data points
Metrics strengthen the page’s message
Numbers communicate scale, impact, or outcomes
Data can be understood quickly at a glance

✕ Avoid using this component when:

The data requires detailed explanation
Metrics are outdated or not verified
Numbers are decorative and not meaningful
The page already contains multiple competing visual elements

Choosing Between Similar Components

If your goal is…

Your goal	Use this component
Emphasize key metrics or data	Stats cards
Highlight a quotation	Quote Card
Feature one story, event, or initiative	50/50 Card
Provide quick links or actions	Button-Style Cards

Stats Cards overview

A Stats Card is a card that displays a data point with a short description. Stats Cards are often grouped and displayed as a grid to highlight a set of compelling statistics.

Example: Presenting impact metrics

This example shows Stats Cards used to present key impact metrics that reinforce the page’s message.

Principles

Perceivable, Operable, Understandable, and Robust

Guidelines

Goals to work toward for accessibility and usability

Success Criteria

Requirements for content, structure, and functionality

Conformance Levels

Level A, Level AA, and Level AAA

Elements of Stats Cards

Element	Purpose
Value	Presents the data
Label	Describes the data point
Description	Provides descriptive details about the data point

Guidance on using Component

Group related data. Use a group of Stats Cards to highlight compelling statistics about a topic in context.
Highlight concise data. Limit use of Stats Cards to data that can tell a story with minimal details; ideally, with only a value and label.
Provide a description as needed. Provide a brief description where needed to fully present the data point.
Invite exploration. Provide links to supporting resources only where exploration is appropriate. Don’t distract users from completing the task at hand.
Optimize space. Use in regions with sufficient space. Avoid using in regions that are narrow due to side navigation or other elements. Adjust columns to best fit the space.

Content guidelines

Use clear, meaningful metrics
Select data points that genuinely support the page’s purpose.

Provide necessary context
Include units, timeframes, or qualifiers where appropriate.

Avoid clutter
Do not overload a single card with too much information.

Accessibility considerations

Ensure sufficient contrast between text and background
Do not rely solely on size or color to emphasize numbers
Provide context so statistics are understandable when read aloud
Maintain logical reading order for grouped cards

Stats Cards features

Feature	Standard
Optimized color contrast	Minimum Contrast
Left-aligned headings and text	Text Block Alignment