Badges are small, inline count and labeling components.

5

<span class="c-badge">5</span>

New

<span class="c-badge">New</span>

Guidelines

• Keep strings used in badges short by limiting text or numbers to no more then 5 characters. Character counts exceeding this will be truncated and display an ellipsis.
• When it makes sense, abbreviate words to keep them short.

👎 Not cool: Maximum

<!-- Fonzie jumping a shark -->
<span class="c-badge">Maximum</span>

😎 Cool:

Max

<!-- Cool, like Fonzie -->
<span class="c-badge">Max</span>

Found in

Badges are used in the following blocks:

• Listing