Action card โ
Action cards are containers with a defined but flexible layout and are often used in groups to showcase a collection of related and quick actions that the user can take.
Usage guidelines โ
When to use โ
To structure similar content / actions into a scannable format.
Writing guidelines โ
Length: Cards in groups should have a similar content length. Don't overload cards with unnecessary content since they serve as a quick scan of a topic.
Capitalization and case: Write tags, pre-line, a title and a description in sentence case.
Specifications โ
Anatomy โ
- Container
- Icon (optional)
- Media (optional)
- Tags / pre-line and icon (optional)
- Title
- Description (optional)
- Call-to-action (optional)
Size โ
Action cards come in four sizes, each designed to fit the grid of a specific viewport: Desktop, Mobile, Tablet Landscape and Tablet Portrait.
Styling โ
Actions cards are available with a white background only. The personalization of these components is done through the elements displayed in the layout (image, pre-line or tags, description, call-to-action).
Behavior โ
Positioning โ
Cards are most often found in groups and can be displayed in grids or carousels.
Cards grid
- Desktop and tablet viewports: a maximum of three cards per row can be displayed. When there are more than three cards to display, they wrap to form another or several other rows.
- Mobile viewport: a single card is displayed on each row.
Cards carousel
When you have more than three cards, those can be grouped into a carousel, so that you don't need more than one row to display all the items.
Add an indicator to visually communicate the option to scroll between cards:
- devices > 767 px: the indicator will be scroll arrows.
- devices < 767 px: the indicator will be only dots pagination.
Alignment โ
Cards are aligned to each viewport's grid. When grouped, items have a 30px horizontal spacing between them, which corresponds to the grid's gutter. It is recommended to leave a 32px vertical spacing between card rows.
Interaction โ
Cards have two different interaction modes, for desktop and touchscreen devices (mobiles and tablets).
Desktop โ
For desktop, there are two possible states: default and hover.
**Default**
No change on the card component, but the individual interaction elements inside may have their own hover states.
**Hover**
A card can have an optional hover state, used to highlight in the layout the UI element the user is currently interacting with, by adding the Shadow-9 style effect. The card itself will not be clickable, but the individual interaction elements are (with their own hover states).
Mobile and Tablet โ
For mobile and tablet, there are two possible states: default and clickable.
**Default**
Only the interaction elements like buttons or links inside the card are individually clickable.
**Clickable**
When the full card is used as an interactive element, the whole component is the clickable area, therefore the call-to-action is optional.