card

Example

One surface around a collection. Cards provide structure and spacing; their contents keep native links, controls, and semantics.

Open the complete example for notes, standings, prose, forms, and a body-only card, in both themes and narrow layouts.

Usage

<m-card>
  <m-card-header>
    <div><h3>Match observations</h3><p>Private notes</p></div>
    <button type="button">Add note</button>
  </m-card-header>
  <m-card-body divider><p>Your observations…</p></m-card-body>
  <m-card-footer divider>
    <p>Only visible to you</p>
    <a href="/notes">View all notes</a>
  </m-card-footer>
</m-card>

All parts are unregistered custom elements, styled by CSS. No module is needed. Header, body, and footer are optional direct children. Use an ordinary heading at the level appropriate to your document; group title and description in a div when the header also has an action.

Custom card tags add no landmark or article semantics, click target, focus behavior, or accessible name. Use a surrounding native article or named section when the content warrants one. A form can wrap the card; native controls still submit normally. Do not turn a card containing buttons or links into another nested click target.

Padded and flush bodies

m-card-body adds padding for prose, fields, and other inset content. m-card-body flush removes that padding so the child owns spacing. Use it for lists, tables, tab groups, or full-width media.

<m-card>
  <m-card-header><h3>My notes</h3></m-card-header>
  <m-card-body flush divider>
    <ol data-list role="list">
      <li><div data-list-body><p>First observation…</p></div></li>
      <li><div data-list-body><p>Second observation…</p></div></li>
    </ol>
  </m-card-body>
</m-card>

A direct data-list child of a flush body inherits the card’s horizontal inset through --list-inset. The list owns that inset, leaving the body flush. List dividers align with row content and headings; there is no doubled padding. A list in a padded body already gets its inset from the body.

divider adds a border at the beginning of a card section. It is independent of the list’s default row dividers. Omit it for continuous sections; set data-dividers="none" on the list to hide only the row dividers. The outer card border is independent of both.

API and theming

Boolean attributes are presence-based: omit flush to restore padding; flush="false" still enables it. The same applies to divider. Attributes set custom properties; structural rules read them.

m-card {
  --card-border: transparent;
  --card-background: transparent;
  --card-pad: var(--space-md);
}

The shared --radius-md controls the corner shape. Cards do not clip overflowing children; menus, focus rings, and authored media retain their own behavior. Override part layouts in ordinary application CSS, for example a grid body for a form.