Skip to content
Design System

Card

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.

Show developer docs

Design

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

Best practices

Section titled “ Best practices”
  • 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

Section titled “ Accessibility”

Screen reader support

Section titled “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

Section titled “ Design resources”
View component in Figma