Cards

Cards are one of Spectra’s core surface components. Keep them token-driven: surface color, border, radius, and shadow come from the system.

Card API

Class	Used for	Notes
`.sp-card`	Base surface card	Uses `--sp-surface`, `--sp-border-1`, `--sp-radius-3`, and `--sp-shadow-1`.
`.sp-card--elev`	Raised card	Moves to `--sp-elev` and `--sp-shadow-2`.
`.sp-card--compact`	Tighter density	Reduces header/body/footer padding from `--sp-4` to `--sp-3`.
`.sp-card__header`	Optional top section	Gets the standard padding and a bottom border.
`.sp-card__body`	Main content region	Default place for prose, UI, or docs content.
`.sp-card__footer`	Optional footer section	Gets a top border and subtle text treatment.

Preview

Default surface, border, radius, and shadow.

Elevated card

Use for hero surfaces, callouts, or more raised groups.

Same structure, smaller padding.

Typical markup

<article class="sp-card sp-card--elev">
  <div class="sp-card__body sp-stack">
    <h2 class="sp-h4">Card title</h2>
    <p class="sp-muted">Token-driven surface styling.</p>
  </div>
</article>