Documentation
Ribbons
Default markup
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
Ribbon position
You can easily change the position of a ribbon by adding a class to the element.
ribbon-top
- moves it to the topribbon-right
- moves it to the rightribbon-bottom
- moves it to the bottomribbon-left
- moves it to the lefg
You can also use multiple classes at once for example: .ribbon.ribbon-top.ribbon-left
moves the ribbon to the top left corner.
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon ribbon-top ribbon-left"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
Ribbon color
Customize the ribbon’s background color. You can click here to see the list of available colors.
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon bg-red"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-filled"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
</div>
</div>
Ribbon text
Set your own text in a ribbon.
-50%
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon bg-green">-50%</div>
</div>
Ribbon style
Change the style of a ribbon.
-50%
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon ribbon-bookmark bg-orange">-50%</div>
</div>