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

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