Styles
Two up
Cards are arranged in two columns on larger breakpoints. Cards stack on smaller viewports.
Three up
Cards are arranged in three columns on larger breakpoints. Cards stack on smaller breakpoints. Cards stack first into two columns and then into a single column as the viewport narrows.
Four up
Cards are arranged in four columns on larger breakpoints. Cards stack first into two columns and then into a single column as the viewport narrows.
Use this style for large numbers of cards, such as asset libraries.
Usage
Cards contain one idea or topic. They often act like as an entry point to a different page with more information on that topic.
Cards organize similar but distinct content together by creating visual groups. This helps with scanning and promotes browsing.
Cards are used in conjunction with a few components:
Do:
- Match grouped cards’ styling and text options
Don't:
- Mix background colors, decorative elements, or call-to-action (CTA) styles
User research
Key takeaways
Groups of cards are:
- Good for chunking content together
- Good for when the user is browsing, not searching
- Good for homogenous content
- Bad for having things stand out
- Bad for compressing information
- Harder to scan than lists
- Responsive to a point
Study links
Primary sources (Boston Scientific user research)
No sources
Secondary sources
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.
For more information, see the WAI-ARIA Authoring Practices for navigation and Deque’s screen reader keyboard shortcuts and gestures documentation.