mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
97 lines
3.1 KiB
Plaintext
97 lines
3.1 KiB
Plaintext
---
|
|
title: Ribbon
|
|
summary: A ribbon is a small label pinned to the edge of a card, for a status such as new or featured.
|
|
description: Highlight cards and other elements with ribbons. Change the position, color, and shape, or add icons and text to draw attention.
|
|
related: [/ui/components/card, /ui/components/badge]
|
|
source: core/scss/ui/_ribbons.scss
|
|
css-vars: ribbon
|
|
classnames:
|
|
component:
|
|
- class: ribbon
|
|
desc: Container element, positioned over its parent
|
|
style:
|
|
- class: ribbon-bookmark
|
|
desc: Notched bookmark shape instead of a plain band
|
|
direction:
|
|
- class: ribbon-top
|
|
desc: Places the ribbon along the top edge
|
|
- class: ribbon-bottom
|
|
desc: Places the ribbon along the bottom edge
|
|
- class: ribbon-start
|
|
desc: Places the ribbon on the leading edge
|
|
color:
|
|
- class: bg-{color}
|
|
desc: Any base color, for example bg-red or bg-green
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
|
|
## Default markup
|
|
|
|
Put a `.ribbon` element inside a card. It can hold an icon or a short text.
|
|
|
|
<Example card column>
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon"><Icon name="star" /></div>
|
|
</div>
|
|
</Example>
|
|
|
|
## 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-start` will move the ribbon to the top left corner.
|
|
|
|
<Example column>
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon ribbon-top ribbon-start"><Icon name="star" /></div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Ribbon color
|
|
|
|
Set the ribbon color with a `bg-*` class from the [color palette](/ui/base/colors).
|
|
|
|
<Example column>
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon bg-red"><Icon name="star" /></div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Ribbon text
|
|
|
|
A ribbon can hold a short text, such as NEW or SALE.
|
|
|
|
<Example column>
|
|
<div class="card">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon bg-green">NEW</div>
|
|
</div>
|
|
</Example>
|
|
|
|
## Bookmark ribbon
|
|
|
|
Add `.ribbon-bookmark` to give the ribbon a bookmark shape.
|
|
|
|
<Example column>
|
|
<div class="card w-100">
|
|
<div class="card-body" style="height: 5rem"></div>
|
|
<div class="ribbon ribbon-bookmark bg-orange"><Icon name="star" /></div>
|
|
</div>
|
|
</Example>
|
|
|
|
## 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 a `visually-hidden` word 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.
|