Ribbons

Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.

Default markup

Use the ribbon class to add the default ribbon to any section of your interface.

<div class="card">
  <div class="card-body" style="height: 5rem"></div>
  <div class="ribbon">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

<div class="card">
  <div class="card-body"></div>
  <div class="ribbon">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

Ribbon position

You can change the position of a ribbon by adding one of the following classes to the element:

ribbon-top - moves it to the top
ribbon-end - moves it to the right
ribbon-bottom - moves it to the bottom
ribbon-start - moves it to the left

Using multiple classes at once will give you more position options. For example, the following class: .ribbon.ribbon-top.ribbon-left will move the ribbon to the top left corner.

<div class="card">
  <div class="card-body" style="height: 5rem"></div>
  <div class="ribbon ribbon-top ribbon-start">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

<div class="card">
  <div class="card-body"></div>
  <div class="ribbon ribbon-top ribbon-start">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

Ribbon color

Customize the ribbon's background color. You can click here to see the list of available colors.

<div class="card">
  <div class="card-body" style="height: 5rem"></div>
  <div class="ribbon bg-red">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

<div class="card">
  <div class="card-body"></div>
  <div class="ribbon bg-red">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

Ribbon text

Add your own text to a ribbon to display any additional information and make it easy to spot for users.

<div class="card">
  <div class="card-body" style="height: 5rem"></div>
  <div class="ribbon bg-green">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

<div class="card">
  <div class="card-body"></div>
  <div class="ribbon bg-green">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

Ribbon style

Change the style of a ribbon to make it go well with your interface design.

<div class="card w-100">
  <div class="card-body" style="height: 5rem"></div>
  <div class="ribbon ribbon-bookmark bg-orange">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

<div class="card">
  <div class="card-body"></div>
  <div class="ribbon ribbon-bookmark bg-orange">
    <!-- Download SVG icon from http://tabler.io/icons/icon/star -->
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
      stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
      <path
        d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
    </svg>
  </div>
</div>

Default markup Ribbon position Ribbon color Ribbon text Ribbon style