Sections

Cards

A card is a flexible and extensible content container.

Usage

Use .card to create a card, with an optional .card-body to create a padded section within a card.

Still stuck?

Our helpful customer service team are here to help.

Contact us
<div class="card" style="max-width: 18rem;">
  <div class="card-body">
    <h3>
      Still stuck?
    </h3>
    <p>
      Our helpful customer service team are here to help.
    </p>
    <a href="#" class="button button-primary my-4">
      Contact us
    </a>
  </div>
</div>

Padding and margin utilities can also be used to control the layout of elements within a card.

Sizing

By default, cards have no fixed width and will fill the full width of their parent element.

Rows, columns, sizing utilities and custom CSS can be used to control their layout if required. The following example demonstrates a simple two-column layout:

Card title

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

Go somewhere

Card title

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

Go somewhere
<div class="row row-sm">
  <div class="sm:col-6">
    <div class="card">
      <div class="card-body">
        <h3 class="my-4">Card title</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button button-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="sm:col-6">
    <div class="card">
      <div class="card-body">
        <h3 class="my-4">Card title</h3>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="button button-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Text alignment

You can quickly change the text alignment of any card and its contents using text align utilities.

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere
<div class="card mb-4" style="max-width: 18rem;">
  <div class="card-body">
    <h3 class="my-4">Card title</h3>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button button-primary">Go somewhere</a>
  </div>
</div>

<div class="card mb-4 text-center mx-auto" style="max-width: 18rem;">
  <div class="card-body">
    <h3 class="my-4">Card title</h3>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button button-primary">Go somewhere</a>
  </div>
</div>

<div class="card mb-4 text-right ml-auto" style="max-width: 18rem;">
  <div class="card-body">
    <h3 class="my-4">Card title</h3>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="button button-primary">Go somewhere</a>
  </div>
</div>

Supported content

Cards support a wide variety of content, including images, text, list groups, links, and more.

Images

Image cap

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

<div class="card" style="max-width: 18rem;">
  <svg>...</svg>
  <div class="card-body">
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Use position utilities to overlay your card content on a background image.

Card image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

<div class="card text-white flex flex-column justify-content-center" style="max-width: 18rem;">
  <svg class="block">...</svg>
  <div class="card-body p-6 absolute top-0 right-0 bottom-0 left-0">
    <h3 class="my-4 text-inherit">
      Card title
    </h3>
    <p>
      This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
    </p>
  </div>
</div>

List groups

Create lists of content in a card with a flush list group.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card overflow-hidden" style="max-width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Mixed content

Combine multiple content types to create the card you need. The following example includes image styles, blocks, text styles, and a list group:

Image cap

Card title

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="max-width: 18rem;">
  <svg class="block">...</svg>
  <div class="card-body">
    <h3 class="my-4">
      Card title
    </h3>
    <p class="mb-0">
      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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="button button-outline-primary mr-4">Button</a>
    <a href="#">Link</a>
  </div>
</div>

Layout

Using a combination of rows, columns and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.

The following example uses .row-flush to remove column gutters and .md:col-* column classes to make the card horizontal at the md breakpoint.

Image

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

<div class="card" style="max-width: 540px;">
  <div class="row row-flush">
    <div class="md:col-4">
      <svg class="block">...</svg>
    </div>
    <div class="flex md:col-8">
      <div class="card-body align-self-center">
        <h3 class="my-4">
          Card title
        </h3>
        <p>
          This is a wider card with supporting text below as a natural lead-in to additional content.
        </p>
        <p>
          <small class="text-gray-600">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
  </div>
</div>

Use .column-count-* to display cards in columns.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

<div class="column-count-2">
  <div class="card inline-block p-4 mb-4">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-gray-600">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card mb-4">
    <svg class="block">...</svg>
    <div class="card-body">
      <h3 class="my-4">Card title</h3>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p><small class="text-gray-600">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card mb-4">
    <svg class="block">...</svg>
    <div class="card-body">
      <h3 class="my-4">Card title</h3>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p><small class="text-gray-600">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card inline-block mb-4">
    <div class="card-body">
      <h3 class="my-4">Card title</h3>
      <p>This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p><small class="text-gray-600">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>