# Card

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

```html
<div class="card">
  <div class="card-head"><h3>Title</h3></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 |
| `.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](../layout)).