Pure ribbon
Pure ribbons have shared markup, starting with the default .pure-ribbons class, as well as shared states. swap modifier classes .pure-ribbon-left and right to switch ribbon direction. add any of the below mentioned modifier classes (example, .pure-ribbon-gray and .pure-ribbon-success and ...) to change the appearance of a ribbon color.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Flat ribbon
You can use flat ribbons to the top by using .flat-ribbon utility classes. add any of the below mentioned modifier classes (example, .flat-ribbon-gray and .flat-ribbon-success and ...) to change the appearance of a ribbon color.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient.
Animation ribbon
You can use animation ribbons by using .global-math utility classes. the below mentioned modifier classes (example, .plane-info and .plane-success and ...) to change the appearance of a ribbons color.
Side ribbon
A neatly CSS crafted ribbon for side edge containers of products or services that are on sale. it is subtly designed as a short ribbon so as to not cover the content of the product/service’s card. Use .left-side-ribbon class to quickly switch a left and right side styled ribbons.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Clip ribbon
A clever design of a menu featured by nice right sided pure CSS ribbon elements featuring icon fonts to represent each of the items.use .ribbon-clip class to quickly switch a clip styled ribbons, add .ribbon-top to switch the ribbon direction.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.