mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
128 lines
3.2 KiB
Markdown
128 lines
3.2 KiB
Markdown
---
|
|
title: Ribbons
|
|
summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
|
description: Highlight elements with graphical ribbons.
|
|
---
|
|
|
|
## Default markup
|
|
|
|
Use the `ribbon` class to add the default ribbon to any section of your interface.
|
|
|
|
{% capture html -%}
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
{%- endcapture %}
|
|
{% include "docs/example.html" html=html card column %}
|
|
|
|
```html
|
|
<div class="card">
|
|
<div class="card-body"></div>
|
|
<div class="ribbon">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## 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.
|
|
|
|
{% capture html -%}
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon ribbon-top ribbon-start">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
{%- endcapture %}
|
|
{% include "docs/example.html" html=html column %}
|
|
|
|
```html
|
|
<div class="card">
|
|
<div class="card-body"></div>
|
|
<div class="ribbon ribbon-top ribbon-start">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Ribbon color
|
|
|
|
Customize the ribbon's background color. You can click [here](/img/ui/base/colors) to see the list of available colors.
|
|
|
|
{% capture html -%}
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon bg-red">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
{%- endcapture %}
|
|
{% include "docs/example.html" html=html column %}
|
|
|
|
```html
|
|
<div class="card">
|
|
<div class="card-body"></div>
|
|
<div class="ribbon bg-red">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Ribbon text
|
|
|
|
Add your own text to a ribbon to display any additional information and make it easy to spot for users.
|
|
|
|
{% capture html -%}
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon bg-green">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
{%- endcapture %}
|
|
{% include "docs/example.html" html=html column %}
|
|
|
|
```html
|
|
<div class="card">
|
|
<div class="card-body"></div>
|
|
<div class="ribbon bg-green">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Ribbon style
|
|
|
|
Change the style of a ribbon to make it go well with your interface design.
|
|
|
|
{% capture html -%}
|
|
<div class="card w-100">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon ribbon-bookmark bg-orange">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
{%- endcapture %}
|
|
{% include "docs/example.html" html=html column %}
|
|
|
|
```html
|
|
<div class="card">
|
|
<div class="card-body"></div>
|
|
<div class="ribbon ribbon-bookmark bg-orange">
|
|
{% include "ui/icon.html" icon="star" %}
|
|
</div>
|
|
</div>
|
|
```
|