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 cd-card. Cards can either be primary (default) or secondary. To make a secondary Card, add the cd-variant-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="cd-card">
  <p>This is an example of a Primary card.</p>
</div>
<div class="cd-card cd-variant-secondary">
  <p>This is an example of a Secondary card.</p>
</div>
<div class="cd-card">
  <p>
    One use case for Secondary cards is creating nested
    cards.
  </p>
  <hr class="cd-divider cd-is-invisible" />
  <div class="cd-card cd-variant-secondary">
    <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 cd-card-title.

Hey

I have a title.

Hey

Me too!

<div class="cd-card">
  <h1 class="cd-card-title">Hey</h1>
  <p>I have a title.</p>
</div>
<div class="cd-card cd-variant-secondary">
  <h1 class="cd-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="cd-card">
  <h1 class="cd-card-title">
    <a href="#">This is a link.</a>
  </h1>
  <p>This is some text.</p>
</div>
<div class="cd-card cd-variant-secondary">
  <h1 class="cd-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 cd-is-transparent.

Transparent Card

This is an example of a transparent card.

<div
  style="
    background-image: linear-gradient(
      135deg,
      var(--cd-color-blue-5),
      var(--cd-color-purple-5),
      var(--cd-color-pink-5)
    );
    padding: var(--cd-space-m);
  "
>
  <div class="cd-card cd-is-transparent">
    <h1 class="cd-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 cd-light-mode or cd-dark-mode classes in addition to the cd-is-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(--cd-space-m);
  "
>
  <div class="cd-card cd-is-transparent cd-light-mode">
    <h1 class="cd-card-title">Transparent Card</h1>
    <p>
      This is an example of a transparent card that always
      displays in light mode.
    </p>
    <hr class="cd-divider cd-is-invisible" />
    <button
      class="cd-button cd-variant-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(--cd-space-m);
  "
>
  <div class="cd-card cd-is-transparent cd-dark-mode">
    <h1 class="cd-card-title">Transparent Card</h1>
    <p>
      This is an example of a transparent card that always
      displays in dark mode.
    </p>
    <hr class="cd-divider cd-is-invisible" />
    <button
      class="cd-button cd-variant-primary"
      type="button"
    >
      This button is automatically in dark mode.
    </button>
  </div>
</div>