Ribbon
A ribbon is a small label pinned to the edge of a card, for a status such as new or featured.
Default markup
Put a .ribbon element inside a card. It can hold an icon or a short text.
<div class="card">
<div class="card-body" style="height: 5rem"></div>
<div class="ribbon">
<!-- Download SVG icon from http://tabler.io/icons/icon/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
</svg>
</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 topribbon-end- moves it to the rightribbon-bottom- moves it to the bottomribbon-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.
<div class="card">
<div class="card-body" style="height: 5rem"></div>
<div class="ribbon ribbon-top ribbon-start">
<!-- Download SVG icon from http://tabler.io/icons/icon/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
</svg>
</div>
</div>Ribbon color
Set the ribbon color with a bg-* class from the color palette.
<div class="card">
<div class="card-body" style="height: 5rem"></div>
<div class="ribbon bg-red">
<!-- Download SVG icon from http://tabler.io/icons/icon/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
</svg>
</div>
</div>Ribbon text
A ribbon can hold a short text, such as NEW or SALE.
<div class="card">
<div class="card-body" style="height: 5rem"></div>
<div class="ribbon bg-green">NEW</div>
</div>Bookmark ribbon
Add .ribbon-bookmark to give the ribbon a bookmark shape.
<div class="card w-100">
<div class="card-body" style="height: 5rem"></div>
<div class="ribbon ribbon-bookmark bg-orange">
<!-- Download SVG icon from http://tabler.io/icons/icon/star -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false" class="icon">
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245" />
</svg>
</div>
</div>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 avisually-hiddenword 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.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
ribbon | component | Container element, positioned over its parent |
ribbon-bookmark | style | Notched bookmark shape instead of a plain band |
ribbon-top | direction | Places the ribbon along the top edge |
ribbon-bottom | direction | Places the ribbon along the bottom edge |
ribbon-start | direction | Places the ribbon on the leading edge |
bg-{color} | color | Any base color, for example bg-red or bg-green |
CSS
Variables
The component uses local CSS variables
on .ribbon for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_ribbons.scss.
--ribbon-margin: #{$card-ribbon-margin};
--ribbon-border-radius: #{$card-ribbon-border-radius};
--ribbon-font-size: #{$card-ribbon-font-size};
--ribbon-icon-size: #{$card-ribbon-icon-size};
--ribbon-offset: #{$ribbon-offset};
--ribbon-padding-y: #{$ribbon-padding-y};
--ribbon-padding-x: #{$ribbon-padding-x};
--ribbon-min-size: #{$ribbon-min-size};
--ribbon-top-width: #{$ribbon-top-width};
--ribbon-top-padding-y: #{$ribbon-top-padding-y};
--ribbon-bookmark-border-size: #{$ribbon-bookmark-border-size};
--ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};Sass variables
Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.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;
