tabler/docs/ui/components/ribbons.md

title, summary, description, layout

title	summary	description	layout
Ribbons	Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.	Highlight elements with graphical ribbons.	default

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">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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">
    <!-- SVG icon from http://tabler.io/icons/icon/star -->
    <svg>...</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">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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">
    <!-- SVG icon from http://tabler.io/icons/icon/star -->
    <svg>...</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">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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">
    <!-- SVG icon from http://tabler.io/icons/icon/star -->
    <svg>...</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">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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">
    <!-- SVG icon from http://tabler.io/icons/icon/star -->
    <svg>...</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">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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">
    <!-- SVG icon from http://tabler.io/icons/icon/star -->
    <svg>...</svg>
  </div>
</div>