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.
NEW
<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.
SCSS variables
Use these SCSS variables to customize ribbons. The default values are:
$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;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 |
