package.docs.components.ribbons.mdx Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of core Show documentation
Show all versions of core Show documentation
Premium and Open Source dashboard template with responsive and high quality UI.
The newest version!
---
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
```