Cards

tier 2 — classes

Three parts, all optional except the outer one: .card holds the border and clips its children, .card-head is the title row, .card-body is the padded content. Put the markup you want inside — that is the point.

For a variant, write the markup you need and use a token for any colour. There is no card component and no variant parameter.

Head and body

.card-head is space-between, so the first child goes left and the rest go right. Group multiple right-hand items in .card-head-right so they share a gap.

Reconciliation

Enabled

Nightly maintenance: prunes stale orders and trims the run history.

Last run2026-07-30 03:15

Duration4.2 s

Rows removed1 284

<div class="card">
    <div class="card-head">
        <strong>Reconciliation</strong>
        <div class="card-head-right">
            <span class="badge badge-go">Enabled</span>
            <button class="btn btn-sm">Run now</button>
        </div>
    </div>
    <div class="card-body">
        <p class="form-hint" style="margin-bottom:10px">
            Nightly maintenance: prunes stale orders and trims the run history.
        </p>
        <div class="kv"><span class="k">Last run</span><span class="v">2026-07-30 03:15</span></div>
        <div class="kv"><span class="k">Duration</span><span class="v">4.2 s</span></div>
        <div class="kv"><span class="k">Rows removed</span><span class="v">1 284</span></div>
    </div>
</div>

Body only

Drop the head when the content names itself.

No pending approvals

Everything in the queue has been decided. New requests appear here automatically.

<div class="card">
    <div class="card-body">
        <h2 style="margin:0 0 4px; font-size:14px">No pending approvals</h2>
        <p class="form-hint">Everything in the queue has been decided. New requests appear here automatically.</p>
    </div>
</div>

A table in a card

No .card-body — the table provides its own cell padding, and .card's overflow:hidden clips the first row's corners to the border radius.

Recent decisions 3

Order	Action	By	When
ORD-4209	Approved	Alex Fischer	4 min ago
ORD-4204	Taken over	J. Weber	22 min ago
ORD-4198	Rejected	Alex Fischer	1 h ago

<div class="card">
    <div class="card-head">
        <strong>Recent decisions</strong>
        <span class="badge">3</span>
    </div>
    <table class="table">
        <thead>
            <tr><th>Order</th><th>Action</th><th>By</th><th>When</th></tr>
        </thead>
        <tbody>
            <tr><td>ORD-4209</td><td><span class="badge badge-go">Approved</span></td><td>Alex Fischer</td><td class="col-muted">4 min ago</td></tr>
            <tr><td>ORD-4204</td><td><span class="badge badge-warn">Taken over</span></td><td>J. Weber</td><td class="col-muted">22 min ago</td></tr>
            <tr><td>ORD-4198</td><td><span class="badge badge-danger">Rejected</span></td><td>Alex Fischer</td><td class="col-muted">1 h ago</td></tr>
        </tbody>
    </table>
</div>

Key/value rows

.kv pushes label and value apart; the value picks up the monospace token, which keeps numbers and IDs aligned down the column.

Assignment groupEU-Central

PriorityP3

SLA remaining01:42:18

Confidence0.87

<div class="card" style="max-width:380px">
    <div class="card-body">
        <div class="kv"><span class="k">Assignment group</span><span class="v">EU-Central</span></div>
        <div class="kv"><span class="k">Priority</span><span class="v">P3</span></div>
        <div class="kv"><span class="k">SLA remaining</span><span class="v">01:42:18</span></div>
        <div class="kv"><span class="k">Confidence</span><span class="v">0.87</span></div>
    </div>
</div>

A caveat about the card's own content

.card-warning pins an amber strip to the card's bottom edge — a stale figure, a degraded source, a partial result. It is part of the card, which is why it is not an .alert: an alert is a statement about the page, and putting one inside a card makes the reader look for what else on the page is affected.

Open orders

P12

P211

P364

The warehouse last answered 14 minutes ago — these counts may lag.

<div class="card" style="max-width:380px">
    <div class="card-head"><strong>Open orders</strong></div>
    <div class="card-body">
        <div class="kv"><span class="k">P1</span><span class="v">2</span></div>
        <div class="kv"><span class="k">P2</span><span class="v">11</span></div>
        <div class="kv"><span class="k">P3</span><span class="v">64</span></div>
    </div>
    <div class="card-warning">
        <i class="ri-time-line"></i>
        <span>The warehouse last answered 14 minutes ago — these counts may lag.</span>
    </div>
</div>