PNG
IHDR ; IDATxܻn0K
)(pA 7LeG{ §㻢| ذaÆ
6lذaÆ
6lذaÆ
6lom$^yذag5 bÆ
6lذaÆ
6lذa{
6lذaÆ
` }HFkm,mӪôô! x|'ܢ˟;E:9&ᶒ}{v]n&6
h_tڠ͵-ҫZ;Z$.Pkž)!o>}leQfJTu іچ\X=8Rن4`Vwl>nG^is"ms$ui?wbs[m6K4O .4%/ bC%t Mז -lG6mrz2s%9s@-k9=)kB5\+͂Zsٲ Rn~GRC wIcIn7jJhۛNCS|j08yiHKֶۛkɈ+;Sz L /F *\Ԕ#"5m2[S =gnaPeғL
lذaÆ
6l^ḵaÆ
6lذaÆ
6lذa;
_ذaÆ
6lذaÆ
6lذaÆ
R IENDB`
---
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 Default
.ribbon-wrapper.ribbon-lg .ribbon
```html
```
{: .max-height-300}
##### Ribbon Size Variations
{: .text-bold .text-dark .mt-5}
Ribbon Default
.ribbon-wrapper.ribbon-lg .ribbon
Ribbon Large
.ribbon-wrapper.ribbon-lg .ribbon
Ribbon Extra Large
.ribbon-wrapper.ribbon-xl .ribbon
##### Text Size Variations
{: .text-bold .text-dark .mt-5}
Ribbon Large
with Large Text
.ribbon-wrapper.ribbon-lg .ribbon.text-lg
Ribbon Extra Large
with Large Text
.ribbon-wrapper.ribbon-xl .ribbon.text-lg
Ribbon Extra Large
with Extra Large Text
.ribbon-wrapper.ribbon-xl .ribbon.text-xl