AdminLte/docs/components/ribbons.md

---

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 <div class="position-relative p-3 bg-gray" style="height: 180px"></div> 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

  <div class="ribbon-wrapper">
    <div class="ribbon bg-primary">
      Ribbon
    </div>
  </div>

{: .max-height-300}

Ribbon Size Variations

{: .text-bold .text-dark .mt-5}

<div class="position-relative p-3 bg-gray" style="height: 180px">
  <div class="ribbon-wrapper">
    <div class="ribbon bg-primary">
      Ribbon
    </div>
  </div>
  Ribbon Default <br />
  <small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>

<div class="position-relative p-3 bg-gray" style="height: 180px">
  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-info">
      Ribbon Large
    </div>
  </div>
  Ribbon Large <br />
  <small>.ribbon-wrapper.ribbon-lg .ribbon</small>
</div>

<div class="position-relative p-3 bg-gray" style="height: 180px">
  <div class="ribbon-wrapper ribbon-xl">
    <div class="ribbon bg-secondary">
      Ribbon Extra Large
    </div>
  </div>
  Ribbon Extra Large <br />
  <small>.ribbon-wrapper.ribbon-xl .ribbon</small>
</div>

  <div class="ribbon-wrapper">
    <div class="ribbon bg-primary">
      Ribbon
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-lg">
    <div class="ribbon bg-info">
      Ribbon Large
    </div>
  </div>

  <div class="ribbon-wrapper ribbon-xl">
    <div class="ribbon bg-secondary">
      Ribbon Extra Large
    </div>
  </div>

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

```