Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.
Keen's custom .ribbonelement enables ribbon style labels on any block component such as card, alerts and container like components.
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>
    

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9