View in Storybook
Anatomy
Cards are made up of a variety of optional sub-variants. Not every card we use within the product uses all these elements together.
- Header: A mandatory title and can contain a mix of subtext, icons, buttons and badges.
- Slots: By default, the container will have 2 visible slots to populate components with but many more are available and can be shown when necessary.
- Footer: Can contain many combinations of text, buttons and navigations. We explain more below.
Usage
As a multi-purpose component, cards are used in many sections of the product.
Responsive custom Tables can be placed inside a single slot. When needing to show more data in any table, Pagination can be added in the footer.
Other card examples such as the insights automation item use the multiple horizontal slots (up to 7 available).
Best practice
Padding and alignment
The header and footer of the Card component have the correct paddings applyed by default. This has not been added to the slot container as consumers are free to add any type and number of components. As a guide, use the pre-defined paddings from the header and footer (20px) to help you align the content.
Use separators for breaks in content
When displaying different types of information but using the same card treatment, toggle the header and footer separators to divide it so it becomes visually clearer. Separators should be used sparingly though; adjusting paddings is the more prefered solution to spacing content correctly.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use to display content and actions on a single topic inside a container. |
🚫 Don’t place cards within cards. Consider using the divider component to break up sections instead. |
|
✅ Use to visually separate specific parts of content in an application view. |
🚫 Don’t use when you need to capture user’s attention in a prominent way. |
|
✅ Include a header when placing a Table component inside the card. |
🚫 Don’t use to inform user about important changes or conditions in the interface. |
|
|
🚫 Don’t use multiple primary buttons inside a card. A card should only contain a single primary action or an accompanying secondary button. |
Look & feel
Although we can place any content in a card, we must retain the foundational attributes to provide a consistent visual treatment for customers to understand. Using different styles can create conflicting visual messages, especially if you're using multiple cards on the same screen.
- Any titles used in cards should be placed in the header component. Thereafter all related text used in the body container should not be larger than the title text.
- All cards have a grey border around the content. This is to add separation from the background colour, even if this is white.
- Maintain consistent padding and alignment with headers and footers when swapping slots with components in the body container.
Tutorial
This instructional video explains how to use our slots in components correctly when working with Cards. As this component has many variations, the slots demonstrate how flexible they are and how consumers can still be creative within our fixed container constraints.