Card

Flexible content container with optional header, body, footer, and bleed regions.

  • Use semantic elements.
  • Supports one or more content sections.
  • Should display nicely in grids with equal-height behavior.
  • Does not own page spacing.
  • A direct <header> or <footer> is the card's structural slot.
  • Use .bleed on a direct child to escape the card padding (full-width images, colored headers or footers).

Understanding Semantic HTML

A quick primer for new contributors

Using the right HTML tags improves both SEO and accessibility. Lean on landmarks and live lists.

  • HTML
  • Accessibility
  • 5 min read
<div style="max-inline-size: 32rem">
  <article class="card stack">
    <header>
      <hgroup>
        <h3>Understanding Semantic HTML</h3>
        <p class="muted">A quick primer for new contributors</p>
      </hgroup>
    </header>

    <p>Using the right HTML tags improves both SEO and accessibility. Lean on landmarks and live lists.</p>

    <ul class="cluster" style="list-style: none; padding: 0; margin: 0; gap: 0.5rem" aria-label="Tags">
      <li><span class="badge primary soft secondary">HTML</span></li>
      <li><span class="badge soft primary">Accessibility</span></li>
      <li><span class="badge outline">5 min read</span></li>
    </ul>

    <footer>
      <time datetime="2026-06-12" class="muted">June 12, 2026</time>
      <button type="button" class="btn outline">Read more</button>
    </footer>
  </article>
</div>
Coastal cliffs at dusk

Coastal cliffs at dusk

A short caption that wraps across a few lines. The image bleeds to the card edges.

Photo 
<div style="max-inline-size: 32rem">
  <article class="card stack">
    <img class="bleed" src="https://picsum.photos/seed/actual-css-card/600/300" alt="Coastal cliffs at dusk" />
    <header>
      <h3>Coastal cliffs at dusk</h3>
    </header>
    <section class="stack" aria-label="Summary">
      <p>A short caption that wraps across a few lines. The image bleeds to the card edges.</p>
    </section>
    <footer>
      <span class="badge primary soft">Photo</span>
      <button type="button" class="btn outline">View</button>
    </footer>
  </article>
</div>

Team

For growing products

$24 / user / month

  • Unlimited projects
  • Up to 25 seats
  • Shared workspaces
  • Priority support
<article class="card stack" style="--card-max-inline-size: 24rem">
  <header class="bleed stack items-center text-center" style="background: var(--surface-subtle)">
    <hgroup>
      <h3>Team</h3>
      <p class="muted">For growing products</p>
    </hgroup>
    <p>
      <span style="font-size: 2rem; font-weight: var(--font-weight-strong); line-height: 1">$24</span>
      <span class="muted">/ user / month</span>
    </p>
  </header>

  <ul class="stack items-center" style="list-style: none; padding: 0">
    <li>Unlimited projects</li>
    <li>Up to 25 seats</li>
    <li>Shared workspaces</li>
    <li>Priority support</li>
  </ul>

  <footer class="bleed" style="background: var(--surface-subtle); justify-content: center">
    <a class="btn primary" href="/billing">Upgrade</a>
  </footer>
</article>

Components

Buttons, alerts, dialogs — all opt-in.

Layout

Stack, cluster, grid, switcher, sidebar.

Patterns

Actions, nav-list — small structural helpers.

<section class="grid">
  <article class="card">
    <header>
      <h3>Components</h3>
    </header>
    <p>Buttons, alerts, dialogs — all opt-in.</p>
    <footer>
      <a class="btn outline" href="components.html">Browse</a>
    </footer>
  </article>

  <article class="card">
    <header>
      <h3>Layout</h3>
    </header>
    <p>Stack, cluster, grid, switcher, sidebar.</p>
    <footer>
      <a class="btn outline" href="layout.html">Browse</a>
    </footer>
  </article>

  <article class="card">
    <header>
      <h3>Patterns</h3>
    </header>
    <p>Actions, nav-list — small structural helpers.</p>
    <footer>
      <a class="btn outline" href="patterns.html">Browse</a>
    </footer>
  </article>
</section>

Design tokens

Semantic variables for color, shape, spacing, and motion.

Utilities

Small layout helpers for local composition.

Runtime

Optional JavaScript for progressive interactions.

<section class="grid gap-none">
  <article class="card">
    <header>
      <h3>Design tokens</h3>
    </header>
    <p>Semantic variables for color, shape, spacing, and motion.</p>
  </article>

  <article class="card">
    <header>
      <h3>Utilities</h3>
    </header>
    <p>Small layout helpers for local composition.</p>
  </article>

  <article class="card">
    <header>
      <h3>Runtime</h3>
    </header>
    <p>Optional JavaScript for progressive interactions.</p>
  </article>
</section>

Raised

Elevated surface with a soft shadow.

Subtle

Lower contrast against the page surface.

Inverted

Dark surface for emphasis. Text inherits the light surface color.

Compact

Tighter padding for dense contexts.

<section class="grid">
  <article class="card raised">
    <hgroup>
      <h3>Raised</h3>
      <p class="muted">Elevated surface with a soft shadow.</p>
    </hgroup>
  </article>

  <article class="card subtle">
    <hgroup>
      <h3>Subtle</h3>
      <p class="muted">Lower contrast against the page surface.</p>
    </hgroup>
  </article>

  <article class="card inverted stack">
    <hgroup>
      <h3>Inverted</h3>
      <p>Dark surface for emphasis. Text inherits the light surface color.</p>
    </hgroup>
    <button type="button" class="btn">Action</button>
  </article>

  <article class="card compact">
    <hgroup>
      <h3>Compact</h3>
      <p class="muted">Tighter padding for dense contexts.</p>
    </hgroup>
  </article>
</section>