Ribbons | Material Design Admin - Eagle

Please wait...

color_lens
settings

Sidebar Skins

Light
Dark

Navbar Skins

Red
Pink
Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Lime
Yellow
Orange
Brown
Grey

Layout Settings

Fixed
Boxed
Collapsed
Collapsed Text
Float
Show Scrollbar

Ribbon Basic

Use .ribbon class within the .ribbon-wrapper parent class to work. You can change ribbon colors by adding contextual classes to your .ribbon element. (e.g., .ribbon-success, .ribbon-primary etc.)

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Right

You can align ribbons to the right by using .ribbon-right class.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Vertical

use .ribbon-vertical class to your .ribbon element. Alternatively, you can align vertical ribbons to the right by using .ribbon-vertical-right class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Bookmark

use .ribbon-bookmark class to your .ribbon element.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Badge

To create a contact chip just add an img inside.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Clipped

use .ribbon-clip class to your .ribbon element.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Shadow

use .ribbon-shadow class to your .ribbon element.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Round Corners

use .ribbon-round class to your .ribbon element.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Ribbon Corner

use .ribbon-corner class to your .ribbon element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, aliquet non lorem.