Logo
Ribbon

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Left Aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Custom Aligment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Vertical

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

With Icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Vertical Ribbons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Clip Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Clip Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Clip Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus. Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.

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

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo