Introduction to cards figures
Cards figures are compact, visually framed elements used to highlight key numbers, comparisons, or narratives in reports, dashboards, and presentations. This guide explains what cards figures are, when to use them, how to design them for clarity and accessibility, and how to integrate them into your workflow. The content focuses on evergreen principles so the guidance remains useful as tools and conventions evolve.
What are cards figures
A cards figure is a self-contained content block that emphasizes a single point, typically featuring a concise label, a primary value or metric, and optional context such as a subtitle, trend indicator, or small chart. Cards can present a wide range of information, from KPIs and risks to profiles and milestones. Their structured, card-based layout helps readers locate and understand important figures quickly, especially in dashboards, executive summaries, and status reports.
When to use cards figures
Use cards figures when you need to surface one or two core figures for a specific audience segment without requiring deep exploration. Common scenarios include executive dashboards, project status pages, product overview pages, and investor updates. Cards work well for comparisons, exceptions, or alerts, where a quick visual scan matters more than detailed analysis. They are less effective for complex multidimensional data or when the full context requires lengthy explanation; in those cases, tables or charts may be more appropriate.
Prioritize clarity and purpose
Each card should have a single, clear purpose. Ask what the reader needs to know after seeing the card and remove anything that does not serve that purpose. If multiple metrics must be shown together, consider whether a small chart or a compact table might communicate the relationship more efficiently than forcing them into one card.
Design principles for cards figures
Good cards balance information density with readability. Key design considerations include consistent card size where appropriate, clear typographic hierarchy (prominent value, subdued label), sufficient contrast for accessibility, and restrained use of color to indicate status or trends. Avoid decorative visuals that do not convey information. On dashboards, establish a coherent layout grid and grouping logic so related cards are visually connected, reducing the cognitive load of scanning multiple figures.
Visual hierarchy and typography
Make the primary figure the largest and darkest element; use a subtitle or unit label in a lighter weight or smaller size. Trend indicators such as arrows or sparklines should be placed near the value and labeled with text for assistive technology. Maintain consistent padding, border radius, and spacing across cards to create a predictable, orderly interface.
Color and status indicators
Use color intentionally to indicate status (e.g., green for target met, amber for caution, red for off-target), but ensure meanings are also conveyed through icons, text, or patterns to support color-blind users and grayscale printing. Provide a legend when multiple status colors appear on a single page, and test combinations for contrast compliance.
Accessibility and inclusive design
Accessible cards figures combine semantic HTML, clear text alternatives, and keyboard navigability. When cards are interactive, ensure they have visible focus states and appropriate ARIA roles. Present the key value and context in the DOM order so screen reader users encounter meaningful content first. Include text equivalents for non-textual information, such as trend arrows or icons, and allow users to customize text size without breaking the layout.
Screen reader and keyboard support
Use semantic elements like <article> or <section> for each card if native interactive controls are not present. For interactive cards, ensure sufficient focus contrast and logical tab order. Provide skip links or region landmarks to help users bypass large sets of cards when appropriate. When a card contains a small chart, offer a text summary of the trends or allow users to view the underlying data in a table.
Best practices and common pitfalls
Place the most critical cards above the fold on key pages, maintain consistent units and rounding across related cards, and group cards by theme or audience to support scanning. Avoid mixing time periods, metrics with different units, or scales that distort comparisons within the same row. Beware of overloading a single card with too much text, which can defeat the purpose of a scannable figure. Test card layouts with real users and refine based on feedback about what is fast to understand and act upon.
Checklist for effective cards figures
- One primary message per card
- Prominent, large-value display with subdued label
- Consistent units, decimals, and rounding across related cards
- High-contrast text and accessible color use
- Meaningful order in the DOM for assistive technology
- Icons and indicators accompanied by text alternatives
- Test with screen readers and keyboard-only navigation
- Use whitespace and grids to group related cards