Card

Cards are surface containers that group related content with a border and background. They support padding modifiers and an interactive (clickable) variant.

Scope. .card is deliberately minimal — a surface, not a layout. Structured card families (media + logo + meta + actions, testimonial cards, post cards) are app-layer compositions: build them in your own CSS on top of the system's tokens and layout primitives, rather than expecting variants here. If the same structured card shape emerges across three real consumers, propose promoting it (Layer Rule 7).

Basic usage

<div class="card">
  <p>Card content goes here.</p>
</div>

Flush card

Remove internal padding with .card--flush, useful when the card contains a full-bleed image or nested content that manages its own spacing.

<div class="card card--flush">
  <!-- Content manages its own padding -->
</div>

Interactive card

Wrap in an <a> tag with .card--interactive for clickable cards. Adds hover shadow and focus ring.

Clickable card

<a class="card card--interactive" href="#">
  <h3 class="card-title">Clickable card</h3>
  <p class="card-description">This entire card is a link.</p>
</a>

Image card

Combine .card--flush with .card--interactive to create a clickable card with a full-bleed image. The .img and .card-image classes handle display and border-radius. Use a padded inner wrapper for the text content.

Card with image

Supporting text below the image.

<a class="card card--flush card--interactive" href="#">
  <img class="img img-16x9 card-image" src="image.jpg" alt="Description">
  <div style="padding: var(--space-xl);">
    <h3 class="card-title">Card with image</h3>
    <p class="card-description">Supporting text below the image.</p>
  </div>
</a>

Accessibility

• Use semantic HTML inside cards (<h3>, <p>, <ul>, etc.)
• Interactive cards (<a>) automatically receive focus ring on focus-visible
• If a card contains multiple interactive elements, do not wrap the entire card in an <a>

Usage rules

Do:

• Use cards to group related content visually
• Use .card--flush when content needs full-bleed layout

Don't:

• Don't nest interactive cards inside other interactive elements
• Don't use cards purely for visual decoration. They should contain meaningful content

CSS reference

This section documents how the component is built. For usage, see the sections above.

Styling

Selectors