This is a core component available with all pages, which you can include with simple lines of code. You can use this to highlight quick info regarding a label, text, etc.

Act3 Badge Example

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>

Here is an example with a Heading module:

Act3 Badge on a Heading module example

Another example of a badge in the menu:

Act3 Badge in the menu

In a Rich Text field, you need to edit the source code:

Act3 Badge on a Rich Text module - Open source code pane

Then find your text element and paste the code:

Act3 Badge on a Rich Text module source 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 to disable the uppercase text styling.

Starting with Version 27, 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>

Act3 Badge alternative styling

Here are all the available classes:

Block class
Size modifier classes
Color modifier classes
Other modifier classes
badge--pill (starting Version 27)