Skip to main content Skip to navigation Skip to search

Use cards 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.

What users commonly use cards with:

  • Images
  • Dropdowns
  • Media blocks
  • Lists and List groups

Anatomy

  • 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.
Do align card actions to the left
This card correctly aligns actions to the left.
Don't align buttons to right
Users might not scan to the bottom right of wide cards.

Behavior

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.

Placement

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.


Card Title

Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes.
Action

Card Title

Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes.
Action

Card Title

Message: Can you imagine what we will be downloading in another twenty years? Who would have ever thought that you could record sound with digital quality fifty years ago? Now we routinely download whole albums worth of music in a couple of minutes.
Action

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.