Documentation

Browse source code
index Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Progress Ribbons New Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

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 top
  • ribbon-right - moves it to the right
  • ribbon-bottom - moves it to the bottom
  • ribbon-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>