mirror of
https://github.com/tabler/tabler.git
synced 2026-10-21 23:34:20 +04:00
63 lines
2.4 KiB
Plaintext
63 lines
2.4 KiB
Plaintext
---
|
|
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 cards and other elements with ribbons. Change the position, color, and shape, or add icons and text to draw attention.
|
|
related: [/ui/components/card, /ui/components/badge]
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
import CodeDocs from '@components/CodeDocs.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-start` 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>
|
|
|
|
## SCSS variables
|
|
|
|
Use these SCSS variables to customize ribbons. The default values are:
|
|
|
|
<CodeDocs name="ribbon-variables" file="core/scss/_variables.scss" />
|