Ribbons
A corner flag for what is special
New ribbon
New
Aero Wireless Headphones$249
Code
<div class="card ribbon-card w-100">
<div class="card-body">
<span class="ribbon accent">New</span><div class="media"><span class="thumb" style="--h: 265" role="img" aria-label="Aero Wireless Headphones"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span><div class="media-body"><span class="media-title">Aero Wireless Headphones</span><span class="media-sub">$249</span></div></div>
</div>
</div>Sale ribbon
Sale
Pulse Smart Watch$329
Code
<div class="card ribbon-card w-100">
<div class="card-body">
<span class="ribbon danger">Sale</span><div class="media"><span class="thumb" style="--h: 200" role="img" aria-label="Pulse Smart Watch"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span><div class="media-body"><span class="media-title">Pulse Smart Watch</span><span class="media-sub">$329</span></div></div>
</div>
</div>Best seller ribbon
Best seller
Lumen Desk Lamp$89
Code
<div class="card ribbon-card w-100">
<div class="card-body">
<span class="ribbon warning">Best seller</span><div class="media"><span class="thumb" style="--h: 45" role="img" aria-label="Lumen Desk Lamp"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></span><div class="media-body"><span class="media-title">Lumen Desk Lamp</span><span class="media-sub">$89</span></div></div>
</div>
</div>