Badge

This is a core component available with all pages, that can be included with simple lines of code. You can use this to highlight a 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'll have to open the source code pane:

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.

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
badge
Size modifier classes
badge--small
badge--medium
badge--large
Color modifier classes
badge--accent
badge--dark
badge--white
badge--ghost
Other modifier classes
badge--lowercase