Cards are used to apply a container around a related grouping of information.
Usage
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.
Types
Example use cases for cards include:
- Images in cards
- Dropdowns
- Media blocks
- Lists and List groups
- Progress indicators
Anatomy
Cards may use 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.


Progress bars belong at the card top or above the footer, closest to the triggering action. Be consistent with progress bar placement within a card group.
Card title
...
Card title
...
Behavior
When the entire card is clickable, the resulting action must be an expected outcome. A common action is to navigate to more details. Not every card need be clickable.
In homogeneous 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.
Placement
Group cards by theme or element Homogeneous content facilitates scanning – users quickly find and compare information of interest. Content of varying type 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.
Card 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Card 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Card 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Content
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.
Code & Examples
Basic card
Clickable cards
Image in cards
Dropdown in card
The footer can contain two actions. For more actions, use a dropdown.
Card media block
Alert in card
Cards can contain alerts.
...
Lists in cards
- Ullamco Laboris
-
Nisi Ut Aliquip
- Exercitation
- Laboris
- Commodo
- Consequat
- Excepteur sint occaecat cupidatat non proident
- Enim ad Minim
-
Occeaecat
- Exercitation
- Laboris
- Commodo
- Ullamco Laboris
-
Nisi Ut Aliquip
- Exercitation
- Laboris
- Commodo
- Consequat
- Excepteur sint occaecat cupidatat non proident
- Enim ad Minim
-
Occeaecat
- Exercitation
- Laboris
- Commodo
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Ullamco Laboris
-
Nisi Ut Aliquip
- Exercitation
- Laboris
- Commodo
- Consequat
- Excepteur sint occaecat cupidatat non proident
- Enim ad Minim
-
Occeaecat
- Exercitation
- Laboris
- Commodo
List group in cards
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aut. Nihil nemo, necessitatibus earum.
- Lorem ipsum dolor.
- Lorem ipsum dolor sit.
- Lorem ipsum.
Progress bars in cards
Card title
...
Card title
...
Card title
Here is a progress bar at the very top of a card.
Cards in a grid
Card 1
...
Card 2
...
Card 3
...