Cards

The box most of the back office is built from

A card

Title, a line under it, actions on the right, a body and a foot.

Today

Market Street · updated 17:30

Net sales: $4,104.44
Transactions: 284

Show the code

<section class="card">
<div class="card-head">
<div class="minw-0">
<h2 class="card-title">Today</h2>
<p class="card-sub">Market Street · updated 17:30</p>
</div>
<div class="cluster">
<button type="button" class="btn btn-sm">Details</button>
</div>
</div>
<div class="card-body">
<dl class="dl">
<div>
<dt>Net sales</dt>
<dd>$4,104.44</dd>
</div>
<div>
<dt>Transactions</dt>
<dd>284</dd>
</div>
</dl>
</div>
<div class="card-foot">
<a class="link" href="sales.html">Sales dashboard</a>
</div>
</section>

A key figure

The number first; the change against before under it.

Net sales, today

$9,328.27

+6.1%vs last Sunday

Show the code

<div class="stats">
<div class="card stat" style="--fit: 5.04">
<div class="stat-top">
<div class="minw-0">
<div class="stat-label">Net sales, today</div>
<div class="stat-value">$9,328.27</div>
</div>
<div class="stat-ico" aria-hidden="true">
<i class="ti ti-cash">
</i>
</div>
</div>
<div class="stat-foot">
<span class="delta good">
<i class="ti ti-trending-up">
</i>+6.1%<span class="sr-only"> up on the previous period</span>
</span>
<span>vs last Sunday</span>
</div>
</div>
</div>

With a photo

The photo’s own shape; nothing cropped.

Butter croissantBakery · $3.50

Show the code

<article class="card product-card" style="max-width: 280px">
<img src="assets/demo/products/butter-croissant.jpg" alt="Butter croissant" width="1200" height="900">
<div class="card-body stack tight">
<b>Butter croissant</b>
<span class="muted fs-sm">Bakery · $3.50</span>
</div>
</article>

A link card

The whole card is one link.

Products52 in 9 categories

Show the code

<a class="folder-card w-100" href="products-grid.html">
<span class="list-ico accent" aria-hidden="true">
<i class="ti ti-package">
</i>
</span>
<b>Products</b>
<small>52 in 9 categories</small>
</a>