Card

Preview

<Card
  title="Quarterly report"
  meta={[{ label: 'Reporting period', value: 'Calendar Q3 2026' }]}>
  <p>Body content for the card.</p>
</Card>

Meta pairs

Each entry in meta is a { label, value } pair: the label is the field's name in the record, the value is what is stored there. Both parts are required, so the header can carry several facts without the reader having to work out how they relate.

A pair identifies the record: which project, which permit, which period. A figure the card exists to report is a stat, so put it in an esa-stat in the body, where it reads at stat scale.

<Card
  title="Eelgrass restoration"
  meta={[
    { label: 'Permit', value: 'USACE Section 404' },
    { label: 'County', value: 'Marin' },
    { label: 'Received', value: 'Mar 4, 2026' },
  ]}>
  <p>Body content for the card.</p>
</Card>

Variants

<Card title="Default">…</Card>
<Card variant="elevated" title="Elevated">…</Card>
<Card variant="filled" title="Filled">…</Card>

Header variants

<Card headerVariant="primary" title="Primary header" meta={[{ label: 'Status', value: 'Active' }]}>…</Card>
<Card headerVariant="muted" title="Muted header">…</Card>

Padding

<Card padding="compact" title="Compact">…</Card>
<Card padding="default" title="Default">…</Card>
<Card padding="spacious" title="Spacious">…</Card>

Actions & footer

The actions slot sits at the right of the header; the footer slot renders a bottom band.

<Card title="Quarterly report" meta={[{ label: 'Reporting period', value: 'Calendar Q3 2026' }]} icon="info">
  <button slot="actions" type="button">Edit</button>
  <p>Body content.</p>
  <span slot="footer">Last updated 2 hours ago</span>
</Card>

API

Slots

Accessibility

• Renders a plain <div> — add role/landmarks at the call site if the card is interactive or a region.
• The title is an <h3>; keep heading order sensible within the surrounding page.
• The header icon is aria-hidden — it decorates the title, not replaces it.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-card is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.