.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>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
