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 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 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>