Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
ribbon class to add the default ribbon to any section of your interface.
You can change the position of a ribbon by adding one of the following classes to the element:
ribbon-top - moves it to the top
ribbon-end - moves it to the right
ribbon-bottom - moves it to the bottom
ribbon-start - moves it to the left
Using multiple classes at once will give you more position options. For example, the following class:
.ribbon.ribbon-top.ribbon-left will move the ribbon to the top left corner.
Customize the ribbon’s background color. You can click here to see the list of available colors.
Add your own text to a ribbon to display any additional information and make it easy to spot for users.
Change the style of a ribbon to make it go well with your interface design.