Card

The .card class creates a visually distinct container with background, border-radius, and shadow styling. It can be applied to any block-level element.

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>

Using with Different Elements

The .card class works on any semantic element. Choose the element that best matches your content's meaning:

<!-- On article element (recommended for semantic content) -->
<article class="card">
  <p>Self-contained composition like a blog post or widget.</p>
</article>

<!-- On div element (for purely presentational containers) -->
<div class="card">
  <p>A generic container with card styling.</p>
</div>

<!-- On section element (for thematic grouping) -->
<section class="card">
  <p>Thematic grouping of content.</p>
</section>

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>