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

THEME COLORS

  • Default
  • Blue Hoki
  • Blue Steel
  • Orange
  • Yellow Crusta
  • Green Haze
  • Red Sunglo
  • Red Intense
  • Purple Plum
  • Purple Studio

LAYOUT

  • Theme Style
  • Layout
  • Top Menu Style
  • Top Menu Mode
  • Mega Menu Style
  • Mega Menu Mode
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.

Staff

  • 8
    ...

    Bob Nilson

    Project Manager
  • ...

    Nick Larson

    Art Director
  • 3
    ...

    Deon Hubert

    CTO
  • ...

    Ella Wong

    CEO

Customers

  • 2
    ...

    Lara Kunis

    CEO, Loop Inc
    Last seen 03:10 AM
  • new
    ...

    Ernie Kyllonen

    Project Manager,
    SmartBizz PTL
  • ...

    Lisa Stone

    CTO, Keort Inc
    Last seen 13:10 PM
  • 7
    ...

    Deon Portalatin

    CFO, H&D LTD
  • ...

    Irina Savikova

    CEO, Tizda Motors Inc
  • 4
    ...

    Maria Gomez

    Manager, Infomatic Inc
    Last seen 03:10 AM
Back
Bob Nilson 20:15 When could you send me the report ?
Ella Wong 20:15 Its almost done. I will be sending it shortly
Bob Nilson 20:15 Alright. Thanks! :)
Ella Wong 20:16 You are most welcome. Sorry for the delay.
Bob Nilson 20:17 No probs. Just take your time :)
Ella Wong 20:40 Alright. I just emailed it to you.
Bob Nilson 20:17 Great! Thanks. Will check it right away.
Ella Wong 20:40 Please let me know if you have any comment.
Bob Nilson 20:17 Sure. I will check and buzz you if anything needs to be corrected.

General

System

General Settings

  • Enable Notifications
  • Allow Tracking
  • Log Errors
  • Auto Sumbit Issues
  • Enable SMS Alerts

System Settings

  • Security Level
  • Failed Email Attempts
  • Secondary SMTP Port
  • Notify On System Error
  • Notify On SMTP Error

About

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam dolore.

Subscribe Email

Follow Us On

Contacts

Phone: 800 123 3456
Email: info@metronic.com
2014 © Metronic by keenthemes. Purchase Metronic!