Card

Contained surface for related content and actions.

MDN: <article>

Pro plan

For growing teams shipping frequently.

Includes deploy previews, team roles, and production analytics.

<div data-header>
  <article style="max-width: 24rem;">
    <header>
      <hgroup>
        <h3>
          Pro plan
        </h3>
        <p>
          For growing teams shipping frequently.
        </p>
      </hgroup>
    </header>
    <p>
      Includes deploy previews, team roles, and production analytics.
    </p>
    <footer>
      <button class="secondary">
        Manage billing
      </button>
      <button>
        Upgrade
      </button>
    </footer>
  </article>
</div>

Cards use the semantic <article> element.

Header, footer, media, and grouped headings are optional.

Usage

A card built on <article>.

  • header — Header. Optional header element. Optional.
  • footer — Footer. Optional footer element. Optional.
  • hgroup — Heading Group. Optional heading group. Optional.
  • h1, h2, h3, h4, h5, h6 — Heading. Card heading text. Optional.
  • p, small — Supporting Text. Supporting text inside the heading group. Optional.
  • img — Media. Optional image element. Optional.
<article style="max-width: 24rem;">
  <header>
    <hgroup>
      <h3>
        Pro plan
      </h3>
      <p>
        For growing teams shipping frequently.
      </p>
    </hgroup>
  </header>
  <p>
    Includes deploy previews, team roles, and production analytics.
  </p>
  <footer>
    <button class="secondary">
      Manage billing
    </button>
    <button>
      Upgrade
    </button>
  </footer>
</article>

Examples

Content

Cards can be used as a default card, a media card, or a compact card.

Pro plan

For growing teams shipping frequently.

Includes deploy previews, team roles, and production analytics.

Dashboard preview

Analytics overview

Daily active users, deploy health, and error rates in one place.

Use cards with media when you need a visual preview above the supporting copy.

Seats remaining

12 of 20 assigned

Add more seats before your next billing cycle closes.

<div data-component="card" data-dimension="content">
  <div data-component="card" data-example="content" data-variant="default">
    <article style="max-width: 24rem;">
      <header>
        <hgroup>
          <h3>
            Pro plan
          </h3>
          <p>
            For growing teams shipping frequently.
          </p>
        </hgroup>
      </header>
      <p>
        Includes deploy previews, team roles, and production analytics.
      </p>
      <footer>
        <button class="secondary">
          Manage billing
        </button>
        <button>
          Upgrade
        </button>
      </footer>
    </article>
  </div>
  <div data-component="card" data-example="content" data-variant="media">
    <article style="max-width: 24rem;">
      <img src="https://placehold.co/640x360" alt="Dashboard preview">
      <header>
        <hgroup>
          <h3>
            Analytics overview
          </h3>
          <p>
            Daily active users, deploy health, and error rates in one place.
          </p>
        </hgroup>
      </header>
      <p>
        Use cards with media when you need a visual preview above the supporting copy.
      </p>
    </article>
  </div>
  <div data-component="card" data-example="content" data-variant="compact">
    <article style="max-width: 20rem;">
      <hgroup>
        <h3>
          Seats remaining
        </h3>
        <small>
          12 of 20 assigned
        </small>
      </hgroup>
      <p>
        Add more seats before your next billing cycle closes.
      </p>
    </article>
  </div>
</div>