Ribbons Component | AdminLTE 3 Documentation
Description: AdminLTE v3 Documentaion

Ribbons Component | AdminLTE v3 Documentaion

# 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

Ribbon
Ribbon Default
.ribbon-wrapper.ribbon-lg .ribbon

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

##### Ribbon Size Variations

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

      <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

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

    <div class="ribbon-wrapper ribbon-lg">
      <div class="ribbon bg-success text-lg">
        Ribbon
      </div>
    </div>

    <div class="ribbon-wrapper ribbon-xl">
      <div class="ribbon bg-warning text-lg">
        Ribbon
      </div>
    </div>

    <div class="ribbon-wrapper ribbon-xl">
      <div class="ribbon bg-danger text-xl">
        Ribbon
      </div>
    </div>

##### Image Example Code

    <div class="position-relative">
        <img src="../../dist/img/photo1.png" alt="Photo 1" class="img-fluid">
        <div class="ribbon-wrapper ribbon-lg">
            <div class="ribbon bg-success text-lg">
                Ribbon
            </div>
        </div>
    </div>