--- layout: page title: Ribbons Component --- The ribbons component is a easy way to display informations above any content. The `.ribbon-warpper` needs to be inside a element with _position:relative;_. In this docs page we place the ribbon always inside `
` for demo purpose but it can placed inside cards, table rows & many more. The ribbon comes in three sizes to display more text or use larger font sizes, default (only `.ribbon-wrapper`), large (`.ribbon-wrapper` with `.ribbon-lg`), extra large (`.ribbon-wrapper` with `.ribbon-xl`). ##### Example Markup {: .text-bold .text-dark .mt-5}
Ribbon
Ribbon Default
.ribbon-wrapper.ribbon-lg .ribbon
```html
Ribbon
``` {: .max-height-300} ##### Ribbon Size Variations {: .text-bold .text-dark .mt-5}
Ribbon
Ribbon Default
.ribbon-wrapper.ribbon-lg .ribbon
Ribbon Large
Ribbon Large
.ribbon-wrapper.ribbon-lg .ribbon
Ribbon Extra Large
Ribbon Extra Large
.ribbon-wrapper.ribbon-xl .ribbon
```html
Ribbon
```
```html
Ribbon Large
```
```html
Ribbon Extra Large
```
##### Text Size Variations {: .text-bold .text-dark .mt-5}
Ribbon
Ribbon Large
with Large Text
.ribbon-wrapper.ribbon-lg .ribbon.text-lg
Ribbon
Ribbon Extra Large
with Large Text
.ribbon-wrapper.ribbon-xl .ribbon.text-lg
Ribbon
Ribbon Extra Large
with Extra Large Text
.ribbon-wrapper.ribbon-xl .ribbon.text-xl
```html
Ribbon
```
```html
Ribbon
```
```html
Ribbon
```
##### Image Example Code {: .text-bold .text-dark .mt-5} ```html
Photo 1
Ribbon
```