Ribbon

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

Example
Ribbon Text
<span class="ribbon">Ribbon Text</span>

Left variation

Example
Ribbon Text (left arrow)
<span class="ribbon ribbon--left">Ribbon Text (left arrow)</span>

Usage guidelines

Dos Don'ts
do iconDo use for very short passages of text.
do-not iconDon't use for long stretches of text.
do iconDo 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.