.ribbon element enables ribbon style labels on any block component such as card, alerts and container like components.
<div class="card card-custom">
<div class="card-header ribbon ribbon-right">
<div class="ribbon-target bg-primary" style="top: 10px; right: -2px;">Ribbon</div>
<h3 class="card-title">
Default
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-right ribbon ribbon-left">
<div class="ribbon-target bg-success" style="top: 10px; left: -2px;">Ribbon</div>
<h3 class="card-title">
Left Aligned
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header ribbon ribbon-top">
<div class="ribbon-target bg-danger" style="top: -2px; right: 20px;">Ribbon</div>
<h3 class="card-title">
Custom Aligment
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header ribbon ribbon-top ribbon-ver">
<div class="ribbon-target bg-danger" style="top: -2px; right: 20px;">
OK!
</div>
<h3 class="card-title">
Vertical
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header ribbon ribbon-top ribbon-ver">
<div class="ribbon-target bg-success" style="top: -2px; right: 20px;">
<i class="fa fa-star text-white"></i>
</div>
<h3 class="card-title">
With Icon
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom card-fit gutter-b">
<div class="card-header ribbon ribbon-top ribbon-ver">
<div class="ribbon-target bg-warning" style="top: -2px; right: 20px;">
<i class="fa fa-star"></i>
</div>
<h3 class="card-title">
Vertical Ribbons
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header card-header-right ribbon ribbon-clip ribbon-left">
<div class="ribbon-target" style="top: 12px;">
<span class="ribbon-inner bg-warning"></span>Ribbon
</div>
<h3 class="card-title">
Clip Style
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header ribbon ribbon-clip ribbon-right">
<div class="ribbon-target" style="top: 15px; height: 45px;">
<span class="ribbon-inner bg-success"></span><i class="fa fa-star"></i>
</div>
<h3 class="card-title">
Clip Style
</h3>
</div>
<div class="card-body">
...
</div>
</div>
<div class="card card-custom">
<div class="card-header ribbon ribbon-clip ribbon-right">
<div class="ribbon-target" style="top: 12px;">
<span class="ribbon-inner bg-warning"></span>Ribbon
</div>
<h3 class="card-title">
Clip Style
</h3>
</div>
<div class="card-body">
...
</div>
</div>
