Card

A surface container with an optional header, body, and footer. Add data-interactive to an anchor to make the whole card a link.

Header / body / footer

Project settings

Manage how your project builds and deploys.

Save

Live example

<article class="re-card">
  <header class="re-card__header">Project settings</header>
  <div class="re-card__body">
    <p>Manage how your project builds and deploys.</p>
  </div>
  <footer class="re-card__footer">
    <button class="re-button" data-size="sm">Save</button>
  </footer>
</article>

Interactive

Clickable card

The whole card is a link.

Live example

<a class="re-card" data-interactive href="#">
  <div class="re-card__body">
    <strong>Clickable card</strong>
    <p>The whole card is a link.</p>
  </div>
</a>

Accessibility

• Keyboard — a plain card is a static container with no keyboard model. An interactive card is a native <a href>, so it joins the normal tab order: Tab focuses it and Enter follows the link. Keep any controls inside a card (buttons, links) as the real interactive elements rather than nesting them in a card-as-link, which would produce invalid focusable-inside-focusable markup.
• Focus — the interactive card lights up the whole surface on :focus-within, drawing the focus ring (--re-shadow-focus) around the card itself; the border-radius plus overflow: hidden keep the ring flush with the rounded corners.
• Semantics — the card carries no role or ARIA: it’s an <article> (or an <a> when interactive) whose accessible name and structure come entirely from its own content — the header / body / footer regions are styling hooks, not landmarks. Give the card a heading inside re-card__header if it needs an accessible name in context.
• Notes — data-interactive only adds hover elevation and the focus ring; it does not change the element’s role, so use a genuinely interactive element (<a> or <button>) when the whole card should be activatable. See the accessibility guide.