Badges

Badges are often used as unread number indicators.

Notifications
Notifications
Notifications
Notifications

Add the badge class to non self closing elements. And add the data-badge attribute to define the content of a badge. The badge will appear in the top-right direction of the element.

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

YZ
YZ
YZ

Badges support button and avatars elements as well.

<span class="badge">
  Notifications
</span>

<span class="badge" data-badge="8">
  Notifications
</span>

<button class="btn badge" data-badge="8">
  Button
</button>

<figure class="avatar badge" data-badge="8" data-initial="YZ">
  <img src="img/avatar-3.png" alt="YZ">
</figure>