---
title: Ribbon
summary: A ribbon is a graphical element that attracts user attention to a given interface element and makes it stand out.
description: Highlight an element with a graphical ribbon.
layout: '@layouts/DocsMdxLayout.astro'
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';

## Default markup

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

<Example card column>
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon"> <Icon name="star" /> </div> </div>
</Example>

## 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.

<Example column>
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon ribbon-top ribbon-start"> <Icon name="star" /> </div> </div>
</Example>

## Ribbon color

Customize the ribbon's background color. See the [full list of available colors](/ui/base/colors) for more details.

<Example column>
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon bg-red"> <Icon name="star" /> </div> </div>
</Example>

## Ribbon text

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

<Example column>
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon bg-green">NEW</div> </div>
</Example>

## Bookmark ribbon

Use the `.ribbon-bookmark` class to create a bookmark ribbon. It is a special style of ribbon that is used to highlight important elements in your interface.

<Example column>
<div class="card w-100"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon ribbon-bookmark bg-orange"> <Icon name="star" /> </div> </div>
</Example>
