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
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo