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
<span class="ribbon">Ribbon Text</span>Left variation
Ribbon Text (left arrow)
<span class="ribbon ribbon--left">Ribbon Text (left arrow)</span>Right variation
Ribbon Text (right arrow)
<span class="ribbon ribbon--right">Ribbon Text (right arrow)</span>Usage guidelines
| Dos | Don'ts |
|---|---|
 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. |