Notification

Notification are often used as unread number indicators.

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

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

Notifications support button and avatars elements as well.

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

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

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

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