Use cards to apply a container around a related grouping of information.
Use a card to present high-level information and guide the user toward related actions and details. Clarity offers clickable cards in the event you want to use a card to initiate an action.
What users commonly use cards with:
- Media blocks
- Lists and List groups
- Cards may have dividers.
- Flat buttons should be used on cards to keep their prominence in harmony with the other information.
- Place the primary action and a single additional action, if required, in the card footer, left-aligned. This placement supports the F-pattern layout. For more than two actions, use a dropdown. Do not place more than eight items in the dropdown menu.
In similar card groups, consider enabling users to switch between card view and datagrid view. While cards show richer content than a datagrid, a datagrid lists more items at once.
Toggles for switching between views go in the upper right of the card group. The card group should be the default view.
Group cards by theme or element. Similar content helps scanning – users can quickly find and compare information of interest. Content of varying types often shows “the bigger picture.” A grid places cards in fixed rows and columns: more content in less vertical space means less scrolling. It’s easy for users to scan content in this layout. If in doubt, use the grid.
Cards can contain text, images, data visualizations, or multimedia. Ensure that the content serves your use case. Keep it simple and legible. Avoid using too much content, overloading the card with too many actions, and placing links within the content.
A card consists of a title 18 px Clarity City Light - content is Clarity City Regular 14px.