3.2 atoms.badge Badge

Toggle example guides Toggle HTML markup

Small and adaptive tag for adding context to just about any content.

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example

Example heading New

Example heading Enrolled

Markup: 02-atoms/badge/badge.twig
<h2>Example heading <span class="badge badge-default">New</span></h2>
<h4>Example heading <span class="badge badge-secondary">Enrolled</span></h4>
Source: 02-atoms/badge/badge.scss, line 3