# Ribbon
> A ribbon is a small label pinned to the edge of a card, for a status such as new or featured.
Highlight cards and other elements with ribbons. Change the position, color, and shape, or add icons and text to draw attention.
Source: https://docs.tabler.io/ui/components/ribbon
---
## Default markup
Put a `.ribbon` element inside a card. It can hold an icon or a short text.
```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-start` will move the ribbon to the top left corner.
```html
```
## Ribbon color
Set the ribbon color with a `bg-*` class from the [color palette](/ui/base/colors).
```html
```
## Ribbon text
A ribbon can hold a short text, such as NEW or SALE.
```html
```
## Bookmark ribbon
Add `.ribbon-bookmark` to give the ribbon a bookmark shape.
```html
```
## Accessibility
- A ribbon is a short label placed over a card. Keep the text in the markup rather than in a background image, or it is lost to a screen reader.
- Read the ribbon in the order it appears in the markup, not where it lands visually. Put it near the card title so it is announced with it.
- An icon-only ribbon needs an `aria-label`, or a `visually-hidden` word next to the icon.
- The ribbon sits on top of the card, so check the contrast against whatever is behind it - a photo needs an overlay.
## SCSS variables
Use these SCSS variables to customize ribbons. The default values are:
```scss
$ribbon-offset: 0.75rem;
$ribbon-padding-y: 0.25rem;
$ribbon-padding-x: 0.75rem;
$ribbon-min-size: 2rem;
$ribbon-top-width: 2rem;
$ribbon-top-padding-y: 0.5rem;
$ribbon-bookmark-border-size: 1rem;
$ribbon-bookmark-notch-width: 0.5rem;
```
_Source: `core/scss/_variables.scss`_