Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' into dev

Browse Source
This commit is contained in:
Bartłomiej Gawęda
2025-05-05 22:13:52 +02:00
parent c42b104fe5 7b7265347c
commit 7082ea1c56
2 changed files with 9 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/content/ui/components/ribbons.md
View File

@@ -18,15 +18,6 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
{%- 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:
@@ -48,18 +39,9 @@ Using multiple classes at once will give you more position options. For example,
{%- 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.
Customize the ribbon's background color. You can click [here](/ui/base/colors) to see the list of available colors.
{% capture html -%}
<div class="card">
@@ -71,15 +53,6 @@ Customize the ribbon's background color. You can click [here](/img/ui/base/color
{%- 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.
@@ -87,25 +60,14 @@ Add your own text to a ribbon to display any additional information and make it
{% 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 class="ribbon bg-green">NEW</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>
```
## Bookmark ribbon
## Ribbon style
Change the style of a ribbon to make it go well with your interface design.
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.
{% capture html -%}
<div class="card w-100">
@@ -116,12 +78,3 @@ Change the style of a ribbon to make it go well with your interface design.
</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>
```