Badge

A core component available on all pages. Use it to highlight quick info on a label, text, or similar elements — includable with just a few lines of code.

You can add a badge next to a text line or in a Rich Text field with a code like this:

<span class="badge badge--medium badge--accent">New</span>

<span class="badge badge--medium badge--accent">New</span>

For example, in a Heading module:

Another example of a badge used in a menu:

In a Rich Text field, edit the source code directly:

Then find your text element and paste the code:

You can replace badge--medium with one of the Size modifier classes below and the badge--accent class with one of the Color modifier classes below.

You can add the badge--lowercase class to disable the uppercase text styling.

You can also add the badge--pill class for a pill-shaped badge.

Here is an example of a large dark badge with the uppercase disabled:

<span class="badge badge--large badge--dark badge--lowercase">New</span>

<span class="badge badge--large badge--dark badge--lowercase">New</span>

Here are all the available classes: