tabler/docs/content/ui/components/ribbons.md

title, summary, description

title	summary	description
Ribbons	Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.	Highlight elements with graphical ribbons.

Default markup

Use the ribbon class to add the default ribbon to any section of your interface.

{% capture html -%}

{% include "ui/icon.html" icon="star" %}

{%- endcapture %} {% include "docs/example.html" html=html card column %}

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 -%}

{% include "ui/icon.html" icon="star" %}

{%- endcapture %} {% include "docs/example.html" html=html column %}

Ribbon color

Customize the ribbon's background color. See the full list of available colors for more details.

{% capture html -%}

{% include "ui/icon.html" icon="star" %}

{%- endcapture %} {% include "docs/example.html" html=html column %}

Ribbon text

Add your own text to a ribbon to display any additional information and make it easy to spot for users.

{% capture html -%}

NEW

{%- endcapture %} {% include "docs/example.html" html=html column %}

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.

{% capture html -%}

{% include "ui/icon.html" icon="star" %}

{%- endcapture %} {% include "docs/example.html" html=html column %}