# Stats Cards ## expand\_more 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](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/Stats%20Card_0.png?itok=g8PvJoOM) *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… SortYour goalUse this componentEmphasize 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. 4 Principles Perceivable, Operable, Understandable, and Robust 13 Guidelines Goals to work toward for accessibility and usability 86 Success Criteria Requirements for content, structure, and functionality 3 Conformance Levels Level A, Level AA, and Level AAA ## Elements of Stats Cards SortElementPurposeValue 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 SortFeatureStandardOptimized color contrast Minimum Contrast Left-aligned headings and text Text Block Alignment See also:- [ Components ](/page-categories/components) ## Stats Cards Showcase ### Stats Cards with data, label, and short description expand\_more This example shows a Stats Cards component with four cards arranged in a 4-column grid. Each card has a value, label, and short description. 4 Principles Perceivable, Operable, Understandable, and Robust 13 Guidelines Goals to work toward for accessibility and usability 86 Success Criteria Requirements for content, structure, and functionality 3 Conformance Levels Level A, Level AA, and Level AAA ### Stats Cards with data, label, and detailed description expand\_more This example shows a Stats Cards component with four cards arranged in a 2-column grid. Each card has a value, label, and detailed description that includes links to support further exploration. 4 Principles Known as the POUR principles, the [four principles of accessibility](https://www.w3.org/WAI/WCAG22/Understanding/intro#understanding-the-four-principles-of-accessibility) are Perceivable, Operable, Understandable, and Robust. They are the outcomes that result from implementing digital accessibility. 13 Guidelines Guidelines are goals to work toward to make content more accessible to people with disabilities and improve usability for everyone. They provide the [framework for accessibility requirements](https://www.w3.org/WAI/standards-guidelines/wcag/glance/). 86 Success Criteria Success Criteria are fine-grained, testable [requirements for accessible content, structure, and functionality](https://www.w3.org/TR/WCAG22/). Referred to as SCs, the requirements are grouped under principles and guidelines, and specify how to achieve goals and outcomes. 3 Conformance Levels There are [three levels of WCAG conformance](https://www.w3.org/WAI/WCAG22/Understanding/conformance), Level A, Level AA, and Level AAA. Level AA is the *de facto* conformance level for digital accessibility.