Card

A content surface with header, body, actions, media, and footer. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• card, card-header, card-body, card-footer, card-title, card-description, card-action, card-media
• card-overlay, card--side

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<article class="card">
  <header class="card-header">
    <h2 class="card-title">Project activity</h2>
    <p class="card-description">The latest changes in your workspace.</p>
  </header>
  <div class="card-body">Three updates this week.</div>
  <footer class="card-footer"><a href="/activity">View activity</a></footer>
</article>

Variants and composition

Compose card-header, card-body, and card-footer with optional media, action, and overlay. card--side changes the root to a row. Overrides must match that modifier’s specificity, for example flex-direction:column@[.card&]; class-string order does not control CSS order. The application still chooses tone and heading level.

Place media directly inside card-media: img, video, picture, or svg. A direct picture > img is also sized. An SVG nested inside an overlay button keeps its own icon size instead of inheriting full-width media sizing.

Behavior and accessibility

The header uses a shrinking content column and an automatic action column; it does not automatically stack the action at a narrow breakpoint. Use wrapping, appropriate content, or explicit responsive composition when space is limited. Choose a semantic heading level for the page; card-title is presentation only.

Reference

See the interactive Storybook specimen ↗. Continue to Carousel or return to the Official preset overview.