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.

This card correctly aligns actions to the left.

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

...

Click

Card title

...

Click

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.

Action 1

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.

Action 2

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.

Action 3

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

...

<div class="clr-row">
  <div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
    <div class="card">
      <div class="card-header">
        Header
      </div>
      <div class="card-block">
        <div class="card-title">
          Block
        </div>
        <div class="card-text">
          ...
        </div>
      </div>
      <div class="card-footer">
        <button class="btn btn-sm btn-link">Footer Action 1</button>
        <button class="btn btn-sm btn-link">Footer Action 2</button>
      </div>
    </div>
  </div>
</div>

Clickable cards

...

<div class="clr-row">
  <div class="clr-col-lg-6 clr-col-12">
    <a href="javascript:void(0)" class="card clickable">
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150?text=Image" />
      </div>
      <div class="card-block">
        <p class="card-text">
          ...
        </p>
      </div>
    </a>
  </div>
</div>

Image in cards

...

...

...

...

<div class="clr-row">
  <div class="clr-col-lg-4 clr-col-12">
    <a href="javascript:void(0)" class="card clickable">
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150?text=Image" alt="..." />
      </div>
      <div class="card-block">
        <p class="card-text">
          ...
        </p>
      </div>
    </a>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <a href="javascript:void(0)" class="card clickable">
      <div class="card-block">
        <p class="card-text">
          ...
        </p>
      </div>
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150?text=Image" alt="..." />
      </div>
    </a>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <a href="" class="card clickable">
      <div class="card-block">
        <p class="card-text">
          ...
        </p>
      </div>
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150?text=Image" alt="..." />
      </div>
      <div class="card-block">
        <p class="card-text">
          ...
        </p>
      </div>
    </a>
  </div>
</div>
<div class="clr-row">
  <div class="clr-col-lg-6 clr-col-12">
    <a href="javascript:void(0)" class="card clickable card-img">
      <img src="https://via.placeholder.com/350x150?text=Image" alt="..." />
    </a>
  </div>
  <div class="clr-col-lg-6 clr-col-12">
    <a href="javascript:void(0)" class="card clickable">
      <div class="card-img">
        <img src="https://via.placeholder.com/350x150?text=Image" alt="..." />
      </div>
    </a>
  </div>
</div>

Dropdown in card

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

Header

Block

...

Item 1 Item 2 Item 3 Item 4

<div class="clr-row">
  <div class="clr-col-lg-6 clr-col-12">
    <div class="card">
      <div class="card-header">
        Header
      </div>
      <div class="card-block">
        <div class="card-title">
          Block
        </div>
        <div class="card-text">
          ...
        </div>
      </div>
      <div class="card-footer">
        <button class="btn btn-sm btn-link">
          Action 1
        </button>
        <button class="btn btn-sm btn-link">
          Action 2
        </button>
        <div class="dropdown top-left open">
          <button class="dropdown-toggle btn btn-sm btn-link">
            Dropdown 1
            <cds-icon shape="caret" direction="down"></cds-icon>
          </button>
          <div class="dropdown-menu">
            <a href="javascript:void(0)" class="dropdown-item">Item 1</a>
            <a href="javascript:void(0)" class="dropdown-item">Item 2</a>
            <a href="javascript:void(0)" class="dropdown-item">Item 3</a>
            <a href="javascript:void(0)" class="dropdown-item">Item 4</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card media block

Header

Project A Owner: John Doe

...

Header

Project B Owner: Jane Doe

...

<div class="clr-row">
  <div class="clr-col-lg-6 clr-col-12">
    <div class="card">
      <div class="card-header">
        Header
      </div>
      <div class="card-block">
        <div class="card-media-block">
          <img src="https://via.placeholder.com/60?text=Image" class="card-media-image" />
          <div class="card-media-description">
            <span class="card-media-title">
              Project A
            </span>
            <span class="card-media-text">
              Owner: John Doe
            </span>
          </div>
        </div>
        <div class="card-text">
          ...
        </div>
      </div>
      <div class="card-footer">
        <button class="btn btn-sm btn-link">Action</button>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-6 clr-col-12">
    <div class="card">
      <div class="card-header">
        Header
      </div>
      <div class="card-block">
        <div class="card-media-block wrap">
          <img src="https://via.placeholder.com/60?text=Image" class="card-media-image" />
          <div class="card-media-description">
            <span class="card-media-title">
              Project B
            </span>
            <span class="card-media-text">
              Owner: Jane Doe
            </span>
          </div>
        </div>
        <div class="card-text">
          ...
        </div>
      </div>
      <div class="card-footer">
        <button class="btn btn-sm btn-link">Action</button>
      </div>
    </div>
  </div>
</div>

Alert in card

Cards can contain alerts.

Use small alerts in a card.

Project B Owner: Jane Doe

...

Button One Button Two

<div class="card">
  <div class="card-block">
    <cds-alert-group cds-layout="m-b:md" size="sm" status="warning" type="default">
      <cds-alert>Use small alerts in a card.</cds-alert>
    </cds-alert-group>
    <div class="card-media-block wrap">
      <img class="card-media-image" src="//placehold.it/60x60" />
      <div class="card-media-description">
        <span class="card-media-title">Project B</span>
        <span class="card-media-text">Owner: Jane Doe</span>
      </div>
    </div>
    <p class="card-text">
      ...
    </p>
  </div>
  <div class="card-footer">
    <a class="card-link">Button One</a>
    <a class="card-link">Button Two</a>
  </div>
</div>

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

Action

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

Action

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

Action

<div class="clr-row">
  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
    <div class="card">
      <div class="card-header">
        Unordered Lists
      </div>
      <div class="card-block">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="card-block">
        <ul class="list">
          <li>Ullamco Laboris</li>
          <li>
            Nisi Ut Aliquip
            <ul class="list">
              <li>Exercitation</li>
              <li>Laboris</li>
              <li>Commodo</li>
            </ul>
          </li>
          <li>Consequat</li>
          <li>Excepteur sint occaecat cupidatat non proident</li>
          <li>Enim ad Minim</li>
          <li>
            Occeaecat
            <ul class="list-unstyled">
              <li>Exercitation</li>
              <li>Laboris</li>
              <li>Commodo</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="card-footer">
        <a class="btn btn-primary">Action</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
    <div class="card">
      <div class="card-header">
        Ordered Lists
      </div>
      <div class="card-block">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="card-block">
        <ol class="list">
          <li>Ullamco Laboris</li>
          <li>
            Nisi Ut Aliquip
            <ol class="list">
              <li>Exercitation</li>
              <li>Laboris</li>
              <li>Commodo</li>
            </ol>
          </li>
          <li>Consequat</li>
          <li>Excepteur sint occaecat cupidatat non proident</li>
          <li>Enim ad Minim</li>
          <li>
            Occeaecat
            <ol class="list-unstyled">
              <li>Exercitation</li>
              <li>Laboris</li>
              <li>Commodo</li>
            </ol>
          </li>
        </ol>
      </div>
      <div class="card-footer">
        <a class="btn btn-primary">Action</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-sm-6 clr-col-12">
    <div class="card">
      <div class="card-header">
        Unstyled Lists
      </div>
      <div class="card-block">
        <p class="card-text">
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="card-block">
        <ul class="list-unstyled">
          <li>Ullamco Laboris</li>
          <li>
            Nisi Ut Aliquip
            <ul class="list">
              <li>Exercitation</li>
              <li>Laboris</li>
              <li>Commodo</li>
            </ul>
          </li>
          <li>Consequat</li>
          <li>Excepteur sint occaecat cupidatat non proident</li>
          <li>Enim ad Minim</li>
          <li>
            Occeaecat
            <ul class="list-unstyled">
              <li>Exercitation</li>
              <li>Laboris</li>
              <li>Commodo</li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="card-footer">
        <a class="btn btn-primary">Action</a>
      </div>
    </div>
  </div>
</div>

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.

Action 1 Action 2

<div class="card">
  <div class="card-img">
    <img src="https://via.placeholder.com/350x150?text=Image" />
  </div>
  <div class="card-block">
    <h4 class="card-title">Title</h4>
    <p class="card-text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, aut. Nihil nemo, necessitatibus earum.
    </p>
  </div>
  <ul class="list-group">
    <li class="list-group-item">Lorem ipsum dolor.</li>
    <li class="list-group-item">Lorem ipsum dolor sit.</li>
    <li class="list-group-item">Lorem ipsum.</li>
  </ul>
  <div class="card-footer">
    <a href="javascript:void(0)" class="btn btn-sm btn-link">Action 1</a>
    <a href="javascript:void(0)" class="btn btn-sm btn-link">Action 2</a>
  </div>
</div>

Progress bars in cards

Card title

...

Click

Card title

...

Click

Card title

Here is a progress bar at the very top of a card.

Label

Longer Label

Really, Really, Really Long Label

Click

<div class="clr-row">
  <div class="clr-col-12 clr-col-sm-4">
    <div class="card">
      <div class="card-block">
        <div class="progress top">
          <progress value="50" max="100"></progress>
        </div>
        <h4 class="card-title">Card title</h4>
        <p class="card-text">...</p>
      </div>
      <div class="card-footer">
        <a href="javascript:void(0)" class="card-link">Click</a>
      </div>
    </div>
  </div>
  <div class="clr-col-12 clr-col-sm-4">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">...</p>
      </div>
      <div class="card-footer">
        <div class="progress">
          <progress value="25" max="100"></progress>
        </div>
        <a href="javascript:void(0)" class="card-link">Click</a>
      </div>
    </div>
  </div>
</div>

<div class="clr-row">
  <div class="clr-col-12 clr-col-sm-6">
    <div class="card">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Here is a progress bar at the very top of a card.</p>
        <div class="progress-block">
          <label>Label</label>
          <div class="progress-static">
            <div class="progress-meter" data-value="75"></div>
          </div>
        </div>
        <div class="progress-block">
          <label>Longer Label</label>
          <div class="progress-static">
            <div class="progress-meter" data-value="80"></div>
          </div>
        </div>
        <div class="progress-block">
          <label>Really, Really, Really Long Label</label>
          <div class="progress success">
            <progress value="20" max="100" data-displayval="20%"></progress>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <div class="progress-static top">
          <div class="progress-meter" data-value="50"></div>
        </div>
        <a href="javascript:void(0)" class="card-link">Click</a>
      </div>
    </div>
  </div>
</div>

Cards in a grid

Card 1

...

Action 1

Card 2

...

Action 2

Card 3

...

Action 3

<div class="clr-row">
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block">
        <h3 class="card-title">Card 1</h3>
        <p class="card-text">
          ...
        </p>
      </div>
      <div class="card-footer">
        <a href="javascript:void(0)" class="btn btn-sm btn-link">Action 1</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block">
        <h3 class="card-title">Card 2</h3>
        <p class="card-text">
          ...
        </p>
      </div>
      <div class="card-footer">
        <a href="javascript:void(0)" class="btn btn-sm btn-link">Action 2</a>
      </div>
    </div>
  </div>
  <div class="clr-col-lg-4 clr-col-12">
    <div class="card">
      <div class="card-block">
        <h3 class="card-title">Card 3</h3>
        <p class="card-text">
          ...
        </p>
      </div>
      <div class="card-footer">
        <a href="javascript:void(0)" class="btn btn-sm btn-link">Action 3</a>
      </div>
    </div>
  </div>
</div>

Cards in css columns

...

Title

...

...

...

Title

...

...

Title

...

Title

...

Action

...

<div class="card-columns">
  <div class="card">
    <div class="card-img">
      <img src="https://via.placeholder.com/350x150?text=Image" />
    </div>
    <div class="card-block">
      <p class="card-text">
        ...
      </p>
    </div>
  </div>
  <div class="card card-block">
    <h3 class="card-title">Title</h3>
    <p class="card-text">
      ...
    </p>
  </div>
  <div class="card">
    <div class="card-block">
      <p class="card-text">
        ...
      </p>
    </div>
    <div class="card-img">
      <img src="https://via.placeholder.com/350x150?text=Image" />
    </div>
    <div class="card-block">
      <p class="card-text">
        ...
      </p>
    </div>
  </div>
  <div class="card card-block">
    <h3 class="card-title">Title</h3>
    <p class="card-text">
      ...
    </p>
  </div>
  <div href="javascript:void(0)" class="card">
    <div class="card-block">
      <p class="card-text">
        ...
      </p>
    </div>
    <div class="card-img">
      <img src="https://via.placeholder.com/350x150?text=Image" />
    </div>
  </div>
  <div class="card card-block">
    <h3 class="card-title">Title</h3>
    <p class="card-text">
      ...
    </p>
  </div>
  <div class="card">
    <div class="card-block">
      <h3 class="card-title">Title</h3>
      <p class="card-text">
        ...
      </p>
    </div>
    <div class="card-footer">
      <a href="javascript:void(0)" class="btn btn-primary">Action</a>
    </div>
  </div>
  <a href="javascript:void(0)" class="card clickable">
    <div class="card-block">
      <p class="card-text">
        ...
      </p>
    </div>
    <div class="card-img">
      <img src="https://via.placeholder.com/350x150?text=Image" />
    </div>
  </a>
</div>