List groups

Rows of things: people, products, events

Simple

Icon, title, a line under it, the figure at the end.

Market Street · Till 1Mia Novak
$2,257.44
Market Street · Till 2Leo Park
$1,847.00
Riverside · Till 1Ben Lopez
$1,908.56

Show the code

<ul class="list">
<li>
<span class="avatar" aria-hidden="true">MN</span>
<div class="grow">
<b>Market Street · Till 1</b>
<small>Mia Novak</small>
</div>
<div class="end">
<b class="num">$2,257.44</b>
</div>
</li>
<li>
<span class="avatar tone-pink" aria-hidden="true">LP</span>
<div class="grow">
<b>Market Street · Till 2</b>
<small>Leo Park</small>
</div>
<div class="end">
<b class="num">$1,847.00</b>
</div>
</li>
<li>
<span class="avatar tone-green" aria-hidden="true">BL</span>
<div class="grow">
<b>Riverside · Till 1</b>
<small>Ben Lopez</small>
</div>
<div class="end">
<b class="num">$1,908.56</b>
</div>
</li>
</ul>

Links

Each row goes somewhere.

Show the code

<ul class="list">
<li>
<a class="list-link" href="low-stock.html">
<img class="thumb" src="assets/demo/products/kombucha.jpg" alt="Kombucha" width="48" height="36" loading="lazy">
<div class="grow">
<b>Kombucha</b>
<small>5 left</small>
</div>
<div class="end">
<span class="badge badge-warning">
<i class="ti ti-clock">
</i>Low stock</span>
</div>
</a>
</li>
<li>
<a class="list-link" href="low-stock.html">
<img class="thumb" src="assets/demo/products/raspberry-tart.jpg" alt="Raspberry tart" width="48" height="36" loading="lazy">
<div class="grow">
<b>Raspberry tart</b>
<small>0 left</small>
</div>
<div class="end">
<span class="badge badge-danger">
<i class="ti ti-alert-circle">
</i>Out of stock</span>
</div>
</a>
</li>
<li>
<a class="list-link" href="low-stock.html">
<img class="thumb" src="assets/demo/products/sourdough-loaf.jpg" alt="Sourdough loaf" width="48" height="36" loading="lazy">
<div class="grow">
<b>Sourdough loaf</b>
<small>5 left</small>
</div>
<div class="end">
<span class="badge badge-warning">
<i class="ti ti-clock">
</i>Low stock</span>
</div>
</a>
</li>
</ul>

With a check

Pick several.

Bakery
Hot drinks
Grocery

Show the code

<ul class="list w-100">
<li>
<label class="choice" for="lg-0">
<input type="checkbox" id="lg-0" checked>
<span class="box">
<i class="ti ti-check">
</i>
</span>Bakery</label>
</li>
<li>
<label class="choice" for="lg-1">
<input type="checkbox" id="lg-1">
<span class="box">
<i class="ti ti-check">
</i>
</span>Hot drinks</label>
</li>
<li>
<label class="choice" for="lg-2">
<input type="checkbox" id="lg-2">
<span class="box">
<i class="ti ti-check">
</i>
</span>Grocery</label>
</li>
</ul>