Cards
We use cards to ensure consistent interactive states, when a button or a link is not enough.
General guidelines:
- Use cards to display content and actions on a single topic.
- Avoid using a single card, but instead when there are at least two of them.
- Cards can be one large touch target, or include buttons for actions.
- When multiple actions inside the card, avoid making the whole card actionable.
- Use for showing a number of items of the same thing in a grid layout.
- Use for selecting an item from a list where more context is required than a chip can provide.
- Use for actions where the user requires more context than a normal button can provide.
- Do not use for visually grouping separate items. Panes should be used for this.
- Do not use where buttons, chips, or plain links would be more appropriate.
Examples
At it’s simplest a card is simply a container that gives your content a consistent border. The card itself has no opinions about it’s contents; you will need to add your own padding etc.
Using cards for selection
To make cards interactive, add the card-clickable class. This will enable consistent states for hover and active.
Note that to make cards focusable you may need to add the tabIndex property yourself, depending on the HTML element you use.
To indicate that a card is selected add the card-selected class.
Cards can be used to select an option:
Using cards for navigation
Cards can be used to navigate when more context or a larger click target is needed.
If the card contains multiple actions or navigation then the card itself should not be clickable.
Specifications
Our default cards are not clickable.
States
Clickable cards
Disabled
Use the disabled class to indicate that the card is disabled.
Hover
On hover the border is changed.
Active
When the card is active the background is changed. The background is one step darker than when selected.
Selected
When the card is selected both background and border are changed. The background is one stemp lighter than when active.
CSS Variables
Light mode:
Dark mode:
