Card

Preview

<Card title="Report" subtitle="Q3 summary">
  <p>Body content for the card.</p>
</Card>

Variants

<Card title="Default" subtitle="Bordered surface">…</Card>
<Card variant="elevated" title="Elevated" subtitle="Shadow, no border">…</Card>
<Card variant="filled" title="Filled" subtitle="Sunken background">…</Card>

Header variants

<Card headerVariant="primary" title="Primary header" subtitle="Inverted text">…</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="Report" subtitle="Q3 summary" 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. 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.