Lists
Rows of related things
Simple
Code
<ul class="list list-divided list-flush">
<li>
<a class="list-row" href="mail-inbox.html">
<span>Inbox</span>
<svg class="icon muted list-end icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg>
</a>
</li>
<li>
<a class="list-row" href="mail-compose.html">
<span>Drafts</span>
<svg class="icon muted list-end icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg>
</a>
</li>
<li>
<a class="list-row" href="contacts.html">
<span>Contacts</span>
<svg class="icon muted list-end icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg>
</a>
</li>
<li>
<a class="list-row" href="notes.html">
<span>Notes</span>
<svg class="icon muted list-end icon-flip" viewBox="0 0 24 24" aria-hidden="true">…</svg>
</a>
</li>
</ul>With people
-
TOTheo OkaforEngineering Lead
-
ICInes CarvalhoAccount Executive
-
RMRahul MehtaData Analyst
Code
<ul class="list list-flush">
<li>
<div class="list-row">
<div class="media">
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #5EC8F8, #1C64C8)">TO</span>
<div class="media-body"><span class="media-title">Theo Okafor</span><span class="media-sub">Engineering Lead</span></div>
</div>
<button type="button" class="btn btn-tinted btn-sm" aria-pressed="false" data-toggle-pressed data-label-on="Following" data-label-off="Follow"><span class="btn-label">Follow</span></button>
</div>
</li>
<li>
<div class="list-row">
<div class="media">
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #4ADEB5, #0E7A62)">IC</span>
<div class="media-body"><span class="media-title">Ines Carvalho</span><span class="media-sub">Account Executive</span></div>
</div>
<button type="button" class="btn btn-tinted btn-sm" aria-pressed="false" data-toggle-pressed data-label-on="Following" data-label-off="Follow"><span class="btn-label">Follow</span></button>
</div>
</li>
<li>
<div class="list-row">
<div class="media">
<span class="avatar avatar-sm" style="background: linear-gradient(135deg, #FDBA5C, #D9480F)">RM</span>
<div class="media-body"><span class="media-title">Rahul Mehta</span><span class="media-sub">Data Analyst</span></div>
</div>
<button type="button" class="btn btn-tinted btn-sm" aria-pressed="false" data-toggle-pressed data-label-on="Following" data-label-off="Follow"><span class="btn-label">Follow</span></button>
</div>
</li>
</ul>With figures
-
$249124 left
Aero Wireless HeadphonesAudio -
$3298 left
Pulse Smart WatchWearables
-
$8956 left
Lumen Desk LampHome
Code
<ul class="list list-flush">
<li>
<div class="list-row">
<div class="media">
<span class="thumb thumb-photo thumb-sm"><img class="pic" src="assets/images/placeholder.svg" alt="Aero Wireless Headphones" loading="lazy"></span>
<div class="media-body"><span class="media-title">Aero Wireless Headphones</span><span class="media-sub">Audio</span></div>
</div>
<span class="list-end"><b>$249</b><small>124 left</small></span>
</div>
</li>
<li>
<div class="list-row">
<div class="media">
<span class="thumb thumb-photo thumb-sm"><img class="pic" src="assets/images/placeholder.svg" alt="Pulse Smart Watch" loading="lazy"></span>
<div class="media-body"><span class="media-title">Pulse Smart Watch</span><span class="media-sub">Wearables</span></div>
</div>
<span class="list-end"><b>$329</b><small>8 left</small></span>
</div>
</li>
<li>
<div class="list-row">
<div class="media">
<span class="thumb thumb-photo thumb-sm"><img class="pic" src="assets/images/placeholder.svg" alt="Lumen Desk Lamp" loading="lazy"></span>
<div class="media-body"><span class="media-title">Lumen Desk Lamp</span><span class="media-sub">Home</span></div>
</div>
<span class="list-end"><b>$89</b><small>56 left</small></span>
</div>
</li>
</ul>