---
title: Ribbons
description: 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.
```html example columns={1} centered
```
```html
```
## 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.
```html example columns={1} centered
```
```html
```
## Ribbon color
Customize the ribbon's background color. You can click [here](colors) to see the list of available colors.
```html example columns={1} centered
```
```html
```
## Ribbon text
Add your own text to a ribbon to display any additional information and make it easy to spot for users.
```html example columns={1} centered
```
```html
```
## Ribbon style
Change the style of a ribbon to make it go well with your interface design.
```html example columns={1} centered
```
```html
```