Overview
The ribbon is used to highlight small passages of inline paragraph text. It can be non-directional or display to point left or right.
Examples
Default variation
Ribbon Text
Ribbon Text (right arrow)
Ribbon Text (left arrow)
<span class="ribbon">Ribbon Text</span>
<span class="ribbon ribbon--right">Ribbon Text (right arrow)</span>
<span class="ribbon ribbon--left">Ribbon Text (left arrow)</span>Usage guidelines
| Dos | Donts |
|---|---|
 Do use for very short passages of text.
|
 Don't use for long stretches of text.
|
|
Do use the left or right directional variations to point to and highlight text.
|
Implementation guidelines
| Name | Class | Description |
|---|---|---|
| Alignment |
.ribbon--left
.ribbon--right
|
Change direction of Ribbon. Default is left. |