Ribbons
A corner flag for what is special
New ribbon
New
Aero Wireless Headphones$249
Code
<div class="card ribbon-card w-full">
<div class="card-body">
<span class="ribbon accent">New</span><div class="media"><span class="thumb thumb-photo"><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">$249</span></div></div>
</div>
</div>Sale ribbon
Sale
Pulse Smart Watch$329
Code
<div class="card ribbon-card w-full">
<div class="card-body">
<span class="ribbon danger">Sale</span><div class="media"><span class="thumb thumb-photo"><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">$329</span></div></div>
</div>
</div>Best seller ribbon
Best seller
Lumen Desk Lamp$89
Code
<div class="card ribbon-card w-full">
<div class="card-body">
<span class="ribbon warning">Best seller</span><div class="media"><span class="thumb thumb-photo"><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">$89</span></div></div>
</div>
</div>