BADGES
Badges are small elements which are used to indicate something. They can notify you that there are new or unread messages or notifications, or indicate the status of a user.
COMPONENT DEMO
BADGES ON ICONS
4
4
4
<!-- CART ICON BADGE -->
<div class="badge mx-2">
<i class="fas fa-cart-plus fa-3x"></i>
<div class="badge-number gentle-flex-center">
<span>4</span>
</div>
</div>
<!-- BELL ICON BADGE -->
<div class="badge mx-2">
<i class="fas fa-bell fa-3x"></i>
<div class="badge-number gentle-flex-center">
<span>4</span>
</div>
</div>
STATUS BADGES
<!-- ONLINE STATUS INDICATOR BADGE -->
<div class="badge">
<img
loading="lazy"
src="https://picsum.photos/id/1027/300/300"
alt="young woman photo"
class="avatar avatar-sm"
/>
<div class="badge-online"></div>
</div>
<!-- OFFLINE STATUS INDICATOR BADGE -->
<div class="badge">
<img
loading="lazy"
src="https://i.pravatar.cc/300?img=70"
alt="Dog staring"
class="avatar avatar-sm"
/>
<div class="badge-offline"></div>
</div>
<!-- DO NOT DISTURB STATUS BADGE -->
<div class="badge">
<img
loading="lazy"
src="https://i.pravatar.cc/300?img=68"
alt="Dog staring"
class="avatar avatar-sm"
/>
<div class="badge-dnd"></div>
</div>