# Ribbon Elements Elements are small components to be used within a layout

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

or

    .ribbon-vertical-right

to your

    .ribbon

element to change the ribbon orientation to vertical.

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

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

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

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

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

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

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

Borders - Vertical
Add

    .ribbon-border-vert

or

    .ribbon-border-dash-vert

to your

    .ribbon

element to add border.

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

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

Borders - Horizontal
Add

    .ribbon-border-hor

or

    .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

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.