Skip to main content Skip to navigation Skip to search

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.

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.

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

Header
Block
...

Clickable cards

Image in cards

The footer can contain two actions. For more actions, use a dropdown.

Header
Block
...

Card media block

Header
Project A Owner: John Doe
...
Header
Project B Owner: Jane Doe
...

Alert in card

Cards can contain alerts.

Use small alerts in a card.
Project B Owner: Jane Doe

...

Lists in cards

Unordered Lists
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
Ordered Lists
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  1. Ullamco Laboris
  2. Nisi Ut Aliquip
    1. Exercitation
    2. Laboris
    3. Commodo
  3. Consequat
  4. Excepteur sint occaecat cupidatat non proident
  5. Enim ad Minim
  6. Occeaecat
    1. Exercitation
    2. Laboris
    3. Commodo
Unstyled Lists

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

...

Cards in css columns

...

Title

...

...

...

Title

...

...

Title

...

Title

...

...