Documentation
Ribbons
Default markup
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon"><!-- SVG icon code -->
</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 icon code -->
</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 icon code -->
</div>
</div>
Ribbon text
Set your own text in a ribbon.
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon bg-green"><!-- SVG icon code -->
</div>
</div>
Ribbon style
Change the style of a ribbon.
<div class="card">
<div class="card-body h-8">
</div>
<div class="ribbon ribbon-bookmark bg-orange"><!-- SVG icon code -->
</div>
</div>