Media
A picture beside a few lines of text
People
HS
Hana Satohana.sato@northwind.test
LM
Lucas Moreaulucas.moreau@northwind.test
Code
<div class="media">
<span class="avatar" style="background: linear-gradient(135deg, #FF8FA8, #C2185B)">HS</span>
<div class="media-body"><span class="media-title">Hana Sato</span><span class="media-sub">hana.sato@northwind.test</span></div>
</div>
<div class="media">
<span class="avatar" style="background: linear-gradient(135deg, #C9A2FF, #7A3FD1)">LM</span>
<div class="media-body"><span class="media-title">Lucas Moreau</span><span class="media-sub">lucas.moreau@northwind.test</span></div>
</div>Products
Nimbus Backpack$119
Orbit Bluetooth Speaker$139
Code
<div class="media">
<span class="thumb" style="--h: 160" role="img" aria-label="Nimbus Backpack"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<div class="media-body"><span class="media-title">Nimbus Backpack</span><span class="media-sub">$119</span></div>
</div>
<div class="media">
<span class="thumb" style="--h: 300" role="img" aria-label="Orbit Bluetooth Speaker"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<div class="media-body"><span class="media-title">Orbit Bluetooth Speaker</span><span class="media-sub">$139</span></div>
</div>Icons
Q3 report.pdf2.4 MB
cover.png820 KB
Code
<div class="media">
<span class="icon-tile info"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<div class="media-body"><span class="media-title">Q3 report.pdf</span><span class="media-sub">2.4 MB</span></div>
</div>
<div class="media">
<span class="icon-tile success"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span>
<div class="media-body"><span class="media-title">cover.png</span><span class="media-sub">820 KB</span></div>
</div>