Badges
Badges are small circles, positioned either at top-right or bottom-right of the parent component. Badge can be used to display numbers, online / offline status, depending on the context.
Avatar Badges
<div class="badge">
<img class="avatar" src="..." alt="..." />
<div class="badge-content online"></div>
</div>
<div class="badge">
<img class="avatar" src="..." alt="..." />
<div class="badge-content offline"></div>
</div>
<div class="badge">
<img class="avatar" src="..." alt="..." />
<div class="badge-content dnd"></div>
</div>
Icon Badges
8
8
8
<div class="badge">
<div class="fas fa-shopping-cart fa-lg"></div>
<div class="badge-content icon-number">8</div>
</div>
<div class="badge">
<div class="fas fa-envelope fa-lg"></div>
<div class="badge-content icon-number primary">8</div>
</div>
<div class="badge">
<div class="fas fa-bell fa-lg"></div>
<div class="badge-content icon-number dnd">8</div>
</div>