.ribbon برچسب های سبک روبان را روی هر یک از اجزای بلوک مانند کارت ، هشدار و اجزای مانند کانتینر فعال می کند.
<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">
پیش فرض
</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">
چپ
</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">
ترازبندی
</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;">
اکی!
</div>
<h3 class="card-title">
عمودی
</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">
با آیکون
</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">
ریبون عمودی
</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">
استایل کلیپ
</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">
استایل کلیپ
</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">
استایل کلیپ
</h3>
</div>
<div class="card-body">
...
</div>
</div>
