Ribbon Elements

Default

Default Ribbon element style. Activate by adding

.ribbon

class to your element. The

.ribbon

element must be placed within the

.mt-element-ribbon

parent element to work.
Change your ribbon colors by adding one of these classes to your

.ribbon

element.

.ribbon-color-default

.ribbon-color-primary

.ribbon-color-info

.ribbon-color-success

.ribbon-color-danger

.ribbon-color-warning

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Align Right

Add

.ribbon-right

to your

.ribbon

element to change the ribbon alignement to right.

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Vertical Ribbon

Add

.ribbon-vertical-left

.ribbon-vertical-right

to your

.ribbon

element to change the ribbon orientation to vertical.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Shadows

Add

.ribbon-shadow

to your

.ribbon

element to add shadow.

Shadow Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Shadow Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Rounded Corners

Add

.ribbon-round

to your

.ribbon

element to add shadow.

Rounded Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Rounded Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Bordered

Add

.ribbon-border

to your

.ribbon

element to add border.

Ribbon Border

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon Border

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Dashed Borders

Add

.ribbon-border-dash

to your

.ribbon

element to add shadow.

Ribbon Border

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Borders - Vertical

Add

.ribbon-border-vert

.ribbon-border-dash-vert

to your

.ribbon

element to add border.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Borders - Horizontal

Add

.ribbon-border-hor

.ribbon-border-dash-hor

to your

.ribbon

element to add border.

Ribbon Border

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon Border

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Clipped Ribbon

Add

.ribbon-clip

to your

.ribbon

and

.ribbon-sub

element to add a bookmark tail. Please note that this option does work with Vertical ribbons

Clipped Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Clipped Ribbon

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Bookmark Ribbon

Add

.ribbon-bookmark

to your

.ribbon-sub

element to add a bookmark tail. Please note that this option does work with Vertical ribbons

Duis mollis, est non commodo luctus, nisi erat porttitor ligula

Ribbon on Portlet

Visual demo for ribbons on Portlets. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Portlet Ribbon

Ribbon on Portlet

Visual demo for ribbons on Portlets. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Portlet Ribbon

Ribbon on Portlet

Visual demo for ribbons on Portlets. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Staff

Bob Nilson

Nick Larson

Deon Hubert

Ella Wong

Customers

Lara Kunis

Ernie Kyllonen

Lisa Stone

Deon Portalatin

Irina Savikova

Maria Gomez

General

System

General Settings

System Settings