Card

A bordered surface with optional head, body, and foot regions. This is card.css in @layer components.

Example
<div class="card">
  <div class="card-head"><h2>Title</h2></div>
  <div class="card-body">Body content…</div>
  <div class="card-foot"><button class="is-primary">Save</button></div>
</div>

Parts

Class	Role
.card	The surface: --bg, a --rule border, --radius-surface, a subtle --shadow-xs, and clipped corners
.card-head	Header region with a soft bottom rule; a heading inside it is normalized to --text-lg semibold, so pick the level that follows the page outline (an h2 under the page's h1), not the size
.card-body	Padded content region
.card-foot	Footer with a soft top rule and a --bg-soft fill; lays out actions flush-right with a gap

All three parts are optional. Use just .card with a .card-body, or add head and foot as needed. The card sets its own internal padding but no outer margin; space cards apart with a .stack or grid utilities (see layout).