Card

A container for a unit of content that appears raised on the page.

Variants

Create a Card by giving a container element the class card. Cards can either be primary (default) or secondary. To make a secondary Card, add the secondary class.

This is an example of a Primary card.

This is an example of a Secondary card.

One use case for Secondary cards is creating nested cards.

This Secondary card is nested within a Primary one.

<div class="card">
  <p>This is an example of a Primary card.</p>
</div>
<div class="secondary card">
  <p>This is an example of a Secondary card.</p>
</div>
<div class="card">
  <p>
    One use case for Secondary cards is creating nested
    cards.
  </p>
  <hr class="divider invisible" />
  <div class="secondary card">
    <p>
      This Secondary card is nested within a Primary one.
    </p>
  </div>
</div>

Title

You can add a title to a Card by adding a child element with the class card-title.

Hey

I have a title.

Hey

Me too!

<div class="card">
  <h1 class="card-title">Hey</h1>
  <p>I have a title.</p>
</div>
<div class="secondary card">
  <h1 class="card-title">Hey</h1>
  <p>Me too!</p>
</div>

Title + Link

If the title has a href attribute (i.e., is a hyperlink), it will inherit additional styles from the Link component.

This is a link.

This is some text.

This is a link.

This is some text.

<div class="card">
  <a href="#" class="card-title">This is a link.</a>
  <p>This is some text.</p>
</div>
<div class="card secondary">
  <a href="#" class="card-title">This is a link.</a>
  <p>This is some text.</p>
</div>