Header: The title of the card, providing a brief context or summary of the content.
Content: Contains the main content of the card, which could be text, numbers, or other elements.
Action: Indicates additional actions or navigational cues. This will change depending on the card variant.
Select: This card is designed to allow users to select from multiple options. These can be used to allow single selection or multiple selections.
Navigate: This card includes a chevron icon, indicating that the card can be clicked or tapped to navigate to another page.
Contextual Menu: This card variant includes a contextual menu, allowing users to access additional actions or settings related to the card content.
Metric: Designed to highlight numerical data prominently within the card body, making it suitable for dashboards and analytics.
Multi select
Single Select
Default
Inline
Default
Categorical
Large
This is used to group related workflow starting points on a page. It creates consistent spacing and behaviors for rows of cards.
Default
Hover
Selected (Select variant)
Disabled
The content container of the interactive card can support any type of UI such as links or buttons.
At the small breakpoint, the cards will stack vertically.
Use interactive cards to display a short list of distinct pieces of information or choices such as report types or app features. When presenting a long list of similar information such as campaigns or line items, consider using a data table. Tables are easier to scan because the positioning and structure is more predictable to the eye. ¹ ²
Do
Don't
When using an Interactive Card Group to display a required selection, a message card should be used to indicate a missed selection.
Do
When using interactive cards to display features and a user does not have permission to access a feature, use the disabled state so that the user can still see the feature. If the user clicks the card, display a Flash Message to provide a suggestion of how to gain access.
Do
The header should function as the button label that informs the user about what happens when they select the card. Keep the content descriptive, clear, and concise. Do not overwhelm users with excessive information or complex details. Interactive Cards are meant to allow for quick decisions and as entry points to more information.²
Do
Don't
Cards: UI-Component Definition https://www.nngroup.com/articles/cards-component/
Best Practices for Designing UI Cards https://app.uxcel.com/courses/ui-components-n-patterns/cards-best-practices-038
The Playful Power of Card Design UI https://www.uxpin.com/studio/blog/card-design-ui/
