## Documentation

Browse source code

##### On this page

- Default markup
- Ribbon position
- Ribbon color
- Ribbon text
- Ribbon style

## 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 h-8">
      </div>
      <div class="ribbon"><!-- SVG icon code -->
      </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-right` - moves it to the right
- `ribbon-bottom` - moves it to the bottom
- `ribbon-left` - moves it to the lefg

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 h-8">
      </div>
      <div class="ribbon ribbon-top ribbon-left"><!-- SVG icon code -->
      </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 h-8">
      </div>
      <div class="ribbon bg-red"><!-- SVG icon code -->
      </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 h-8">
      </div>
      <div class="ribbon bg-green"><!-- SVG icon code -->
      </div>
    </div>

## Ribbon style

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

    <div class="card">
      <div class="card-body h-8">
      </div>
      <div class="ribbon ribbon-bookmark bg-orange"><!-- SVG icon code -->
      </div>
    </div>