All components

Summary Cards

Stock .card whose body is a flex column: a status badge naming what the figure is, an uppercase .card-title, the figure in the display face (.fjalla .fs-2), a small support line, then actions on .mt-auto so they pin to the bottom, and an optional footnote under a hairline. The highlighted variant adds .bg-primary-subtle and gold text — use it for the one earned figure on a page, never for more than one card.

Standard, with actions
Amount due
Unpaid Orders

$1,248.50

1 Order

View unpaid orders
Lifetime total
Lifetime Orders

7

$4,687.32 is what you have paid us.

View all orders
Footnote, and the highlighted variant
Store credit
Account Balance

$75.00

Your account balance will automatically be applied at checkout.

This sum is held on your account and applied to orders at checkout.
Referral reward
Available Discount

$50.00

It applies on its own to your next purchase and any remainder carries forward without expiry.

You earned this when people you referred placed a first order and paid in full.

This amount lowers coin prices and cannot be withdrawn.
The disclosure is a stock .collapse; the page bundle pages/dashboard.scss turns the chevron while it is open.
Usage
<div class="card h-100 bg-primary-subtle">
  <div class="card-body d-flex flex-column gap-2">
    <span class="badge badge-status-review align-self-start">Referral reward</span>
    <h5 class="card-title text-uppercase text-primary mb-0">Available Discount</h5>
    <p class="card-text fjalla fs-2 text-primary mb-0">$50.00</p>
    <p class="card-text small">Support line.</p>
    <div class="mt-auto pt-3 border-top border-primary-subtle small text-muted">Footnote.</div>
  </div>
</div>