Badges

Badges are useful, for example, to define tags.

<div class="c-badge">
  <span>example</span>
</div>

Badges are inline elements

<div class="a-badge">
  <span>one</span>
</div>

<div class="a-badge">
  <span>two</span>
</div>

Exists different modifiers to express the badge nature.

• -brand Brand color badge
• -info Information bagde
• -danger Danger badge
• -dark Dark badge
• -light Light badge

Example of usage

<div class="a-badge -brand">
  <span>brand</span>
</div>

Also there are available modifiers to change the type of badge.

• -outline Outline style
• -flat Flat style

outline badges

flat badges

Example of usage

<div class="a-badge -outline">
  <span>outline</span>
</div>

Pills

Pills could be used, for example, to show a number of notifications. To create a pill use the modifier -pill.

solid pills

outline pills

Example of usage

<div class="a-badge -pill">
  <span>50</span>
</div>