Loading...

Ribbons View all kinds of Ribbons examples below.

Ribbons

Use the markups below to create ribbons that can be very useful when used for pricing table or similar elements.

Basic

Basic left top ribbon example created by add the .ribbonCSS class to an element.

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Positions

To change the position of the ribbon from top left to top right, add .ribbon-trCSS class to the .ribbonelement.

Ribbon

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Corner ribbon

Use the markup below to create a corner ribbon. You can also add links or tooltips to corner ribbons.

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...Lorem ipsum dolor sic amet dixit tu lorem ipsum dolor sic amet...

Online
Idle
Offline
Cloud status
Latest transfers
Tasks for today
Pending notifications New