Cards

Cards act as entry points to more detailed information and provide a preview of the detail a user will see when they select a card.

Best practices

Cards are an effective component when the following guidelines are considered:

Present one idea per card. If there are multiple ideas, break them out into separate cards.
Cards must always include a title and can include intro copy and a subtitle.
- Titles and subtitles must follow proper page heading structure.
- The examples below all start at <h2>; please adjust your code accordingly.
- For cards that link to anchored sections on the page — and only have a title — use <p> for the title.
Optionally, cards can also include an image or icon. In this case, always use a unique image or icon on each card and ensure the icon is relevant and easy to understand.
The entire card should function as a link to the destination. Optionally, a button may be included to link to the destination.
Supporting links may be added to enable actions like sharing. Cards should not have more than one destination but can have multiple supplemental actions.
Provide visual hierarchy to the content to increase the cards focus and legibility.

How it works

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="row">
  <div class="col-12 col-sm-5">
    <div class="card link">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <img class="card-img-top" src="/designsystem/assets/img/cw-h-black-rgb.svg" alt="City of Winnipeg logo">
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item"><a href="#" class="card-link">Action link 1</a></li>
        <li class="list-group-item"><a href="#" class="card-link">Action link 2</a></li>
      </ul>
    </div>
  </div>
</div>

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

Use card body whenever you need a padded section within a card but don’t use this style without the components and formatting mentioned as best practices.

<div class="card link">
  <a href="#" aria-label="Card title" class="full-card-link"></a>
  <div class="card-body">
    Use card body whenever you need a padded section within a card but don’t use this style without the components and formatting mentioned as best practices.
  </div>
</div>

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. For titles of cards that link to anchored sections on the page — and only have a title — use <p> instead of <h*>. Use .card-title-sm for titles of cards within narrower columns. If text is still too wide and words are breaking, a wider column needed.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card titles and subtitles must follow proper page heading structure.

Links are added and placed next to each other by adding .card-link to an <a> tag.

With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Action link 1 Action link 2

<div class="row">
  <div class="col-12 col-sm-5">
    <div class="card link">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <h3 class="card-subtitle mb-2 text-muted">Card subtitle</h3>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Action link 1</a>
        <a href="#" class="card-link">Action link 2</a>
      </div>
    </div>
  </div>
</div>

Card destination link

The entire card should be a link to the main destination. To make the entire card a link add .link to the .card and then add a link with the class .full-card-link. Add an aria-label to the link so that it is accessible.

Card title

A quick example to demonstrate full card links.

<div class="row">
  <div class="col-12 col-sm-4">
    <div class="card link">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">A quick example to demonstrate full card links.</p>
      </div>
    </div>
  </div>
</div>

Images

.card-img-top places an image to the top of the card.

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="row">
  <div class="col-12 col-sm-5">
    <div class="card link">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <img class="card-img-top" src="/designsystem/assets/img/cw-h-black-rgb.svg" alt="City of Winnipeg logo">
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

Icons

Add .card-icon to .card-img-top along with your icon classes for icons as card images.

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="row">
  <div class="col-12 col-sm-5">
    <div class="card link">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <div aria-label="Clock icon" class="fal fa-clock card-img-top card-icon"></div>
      <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

List groups

Add supplemental actions to a card with a flush list group.

<div class="row">
  <div class="col-12 col-sm-4">
    <div class="card">
      <ul class="list-group list-group-flush">
        <li class="list-group-item"><a href="#" class="card-link">Action link 1</a></li>
        <li class="list-group-item"><a href="#" class="card-link">Action link 2</a></li>
      </ul>
    </div>
  </div>
</div>

Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Using grid markup

Using the grid, wrap cards in columns and rows as needed.

Card title

Some quick example text.

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card title

Some quick example text.

<div class="row">
  <div class="col-sm-4 mb-4">
    <div class="card link h-100">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <img class="card-img-top" src="/designsystem/assets/img/cw-h-black-rgb.svg" alt="City of Winnipeg logo">
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">Some quick example text.</p>
      </div>      
    </div>
  </div>
  <div class="col-sm-4 mb-4">
    <div class="card link h-100">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <img class="card-img-top" src="/designsystem/assets/img/cw-h-black-rgb.svg" alt="City of Winnipeg logo">
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>     
    </div>
  </div>
  <div class="col-sm-4 mb-4">
    <div class="card link h-100">
      <a href="#" aria-label="Card title" class="full-card-link"></a>
      <img class="card-img-top" src="/designsystem/assets/img/cw-h-black-rgb.svg" alt="City of Winnipeg logo">
      <div class="card-body">
        <h2 class="card-title">Card title</h2>
        <p class="card-text">Some quick example text.</p>
      </div>
      <ul class="list-group list-group-flush">
        <li class="list-group-item"><a href="#" class="card-link">Action link 1</a></li>
        <li class="list-group-item"><a href="#" class="card-link">Action link 2</a></li>
      </ul>
    </div>
  </div>
</div>

Using utilities

Use our handful of available sizing utilities to quickly set a card’s width.

Card title

With supporting text below as a natural lead-in to additional content.

Card title

With supporting text below as a natural lead-in to additional content.

<div class="card link w-75 mb-3">
  <a href="#" aria-label="Card title" class="full-card-link"></a>
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>

<div class="card link w-50">
  <a href="#" aria-label="Card title" class="full-card-link"></a>
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>