Card
Overview#
Cards contain content and actions about a single or similar subject in a flexible-sized container.
Design Guidelines#
Use when#
- A collection of similar content should be grouped.
- There is a need to make relevant content easier to scan and read.
- There is a need to make the purpose of an action clear.
- There is a need to give hierarchy to more than one grouping of content.
Visual Style#
- Always size the card appropriately to the content within.
- Never change the card background colour.
- Avoid using more than one primary button on a card.
Placement#
- Card actions are always placed in the header or footer.
- Card placement within a page follows the layout component hierarchy.
- Always use 20px margin spacing between cards/elements. See layout-notes.
- Follow the design guidelines for Alerts in a card (error and warning).
Behaviour#
- Title and Body text is constrained top, left and right.
- Card can be resized upon dragging to the right or down.
- Stick to single user flows or break more complicated flows into multiple cards.
Editorial#
Titles#
- Use titles that set clear expectations about the cards purpose.
- Do not use punctuation for card titles.
- Write in sentence case (capitalize the first word and proper nouns only).
Content#
- Prioritize content so the user knows what to do first.
- Be clear if an action is required.
- Write in sentence case (capitalize the first word and proper nouns only).
Call-to-actions and optional actions#
- Should be clear and predictable.
- See Actionable Words for additional guidance.
- See Button Design Guidelines for hierarchy, placement and editorial guidance.
Card Examples#
Body content only#
Use when simple content is necessary to support or inform that doesn’t require any actions.
Title and body#
Use when content is complex enough to require a title but doesn’t require any actions.
Skeleton Loading State#
Use when providing a low-fidelity depiction of the card before the content appears.
Title, body content, and footer actions#
Use when content is complex enough to require a title and user should review the contents before taking an important action.
Title, body content, and extra#
Use for less important card actions, or as an optional action that needs to persist, and user may act on before reviewing the card content.
Title, body content, extra and footer actions#
Use when content is complex enough to require a title and user should review the contents before taking an important action and a secondary or optional action needs to persist.
Button in body#
Use when user should review the contents before taking an action where the action is lower in hierarchy than a page-level action or another higher-level action card exists