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.
  • 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.

<div class="card link" style="width: 18rem;">
  <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">
    <h5 class="card-title">Card title</h5>
    <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>

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.

<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>

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

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.

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

<div class="card link" style="width: 18rem;">
  <a href="#" aria-label="Card title" class="full-card-link"></a>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <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>

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.

<div class="card link" style="width: 15rem;">
  <a href="#" aria-label="Card title" class="full-card-link"></a>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">A quick example to demonstrate full card links.</p>
  </div>
</div>

Images

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

<div class="card link" style="width: 18rem;">
  <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>

Icons

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

<div class="card link" style="width: 18rem;">
  <a href="#" aria-label="Card title" class="full-card-link"></a>
  <div aria-label="Clock icon" class="far 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>

List groups

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

<div class="card" style="width: 18rem;">
  <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>

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.

<div class="row">
  <div class="col-sm-4">
    <div class="card link mb-4">
      <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">
        <h5 class="card-title">Card title</h5>
        <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 class="col-sm-4">
    <div class="card link mb-4">
      <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">
        <h5 class="card-title">Card title</h5>
        <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 class="col-sm-4">
    <div class="card link mb-4">
      <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">
        <h5 class="card-title">Card title</h5>
        <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.

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