Card

Cards are implemented using the .card class. This class can be applied to any semantic element like <article>, <div>, or <section>.

Basic Usage

<div class="card">
  <hgroup>
    <h2>Card title</h2>
    <p>This is the subtitle</p>
  </hgroup>
  <p>This is the main content of the card.</p>
</div>

Card with Header and Footer

Cards support <header> and <footer> child elements with distinct background styling.

<div class="card">
  <header>
    <h2>Card title</h2>
  </header>
  <p>Cards support optional header and footer sections that are visually distinct from the main content.</p>
  <footer>
    <button class="secondary">Cancel</button>
    <button>Confirm</button>
  </footer>
</div>

Variants

Intent Variants

To convey intent and importance, cards can be styled with different variants:

See code

<section>
  <div class="card primary">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card secondary">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card contrast">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card success">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card info">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card warning">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card danger">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
</section>

Modifiers

.subtle creates cards with a more muted appearance, often used for less prominent actions.

See code

<section>
  <div class="card primary subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card secondary subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card contrast subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card success subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card info subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card warning subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card danger subtle">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
</section>

.ghost creates transparent background cards with colored text and borders, useful for secondary actions where you want minimal visual weight.

See code

<section>
  <div class="card primary ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card secondary ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card contrast ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card success ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card info ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card warning ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
  <div class="card danger ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
</section>