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 you place an anchor tag inside the Card title, it will inherit styles from both the Card title and the Link component.

This is a link.

This is some text.

This is a link.

This is some text.

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

Transparent Cards

Cards on top of a colorful background can also have a transparent blurred background instead of the solid default style. To opt into this, add the class transparent.

Transparent Card

This is an example of a transparent card.

<div
  style="
    background-image: linear-gradient(
      135deg,
      var(--color-blue-5),
      var(--color-purple-5),
      var(--color-magenta-5)
    );
    padding: var(--space-m);
  "
>
  <div class="card transparent">
    <h1 class="card-title">Transparent Card</h1>
    <p>This is an example of a transparent card.</p>
  </div>
</div>

Transparency + Images

If you want to use a transparent card on top of an image that is mostly light or mostly dark, you may force the card to use light or dark mode to match (for aesthetic reasons) using the light-mode or dark-mode classes in addition to the transparent class. This has the added benefit of making sure any other components inside are in the correct mode as well.

Transparent Card

This is an example of a transparent card that always displays in light mode.

Transparent Card

This is an example of a transparent card that always displays in dark mode.

<div
  style="
    background-image: url(&quot;/sumner-mahaffey-7Y0NshQLohk-unsplash.jpg&quot;);
    background-size: cover;
    background-position: center;
    padding: var(--space-m);
  "
>
  <div class="card transparent light-mode">
    <h1 class="card-title">Transparent Card</h1>
    <p>
      This is an example of a transparent card that always
      displays in light mode.
    </p>
    <hr class="divider invisible" />
    <button class="button primary" type="button">
      This button is automatically in light mode.
    </button>
  </div>
</div>
<div
  style="
    background-image: url(&quot;/takashi-watanabe-f2DL8oI-7N8-unsplash.jpg&quot;);
    background-size: cover;
    background-position: center;
    padding: var(--space-m);
  "
>
  <div class="card transparent dark-mode">
    <h1 class="card-title">Transparent Card</h1>
    <p>
      This is an example of a transparent card that always
      displays in dark mode.
    </p>
    <hr class="divider invisible" />
    <button class="button primary" type="button">
      This button is automatically in dark mode.
    </button>
  </div>
</div>