Skip to content
Design System

Card Design

Cards are used to group similar concepts and tasks together for users to scan, read, and get things done. It displays content in a familiar and recognizable style.

Header Component Badge Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Primary Secondary

In Practice

  • Group related information
  • Display information in a way that prioritizes what the user needs to know most first
  • Use headings that set clear expectations about the card’s purpose
  • Stick to single user flows or break more complicated flows into multiple sections
  • Avoid more than 2 call-to-action buttons or links and only one primary call to action per card
  • Use calls to action on the bottom of the card for next steps and use the space in the upper right corner of the card for persistent, optional callouts (such as Time saver)

Accessibility

Screen reader support

Use semantic HTML to provide more context to screen readers and bots. For example, use <header> HTML tag for card headers, <footer> HTML tag for card footers, and wrap the card in an <article> or <section> HTML tag.

Design resources

View component in Figma