Badge
A badge can be use to show notification count or some kind of status
information.
Examples
Badges on Avatar
<div class="badge-container mr-3">
<div class="avatar avatar-lg">
<img
class="img-responsive img-round"
src="/css/images/img_avatar.png"
alt="avatar"
/>
</div>
<span class="status-badge status-online"></span>
</div>
<div class="badge-container mr-3">
<div class="avatar avatar-md">
<img
class="img-responsive img-round"
src="/css/images/img_avatar.png"
alt="avatar"
/>
</div>
<span class="status-badge status-offline"></span>
</div>
<div class="badge-container mr-3">
<div class="avatar avatar-sm">
<img
class="img-responsive img-round"
src="/css/images/img_avatar.png"
alt="avatar"
/>
</div>
<span class="status-badge status-away"></span>
</div>
<div class="badge-container mr-3">
<div class="avatar avatar-xs">
<img
class="img-responsive img-round"
alt="avatar"
src="/css/images/img_avatar.png"
/>
</div>
<span class="status-badge status-online"></span>
</div>
Badges on Icon
2
<a>
<span class="btn-icon badge-container"
><i class="text-slate-700 fas fa-shopping-cart"></i>
<span class="icon-badge-sm text-xs status-badge bg-indigo-400 text-white">2</span>
</span>
</a>
Badges on Text
Example of Text with Badge
New
Example of Text with Badge
New
Example of Text with Badge
New
Example of Text with Badge
New
<h2 class="badge-container mb-2">
Example of Text with Badge
<span class="text-badge bg-teal-500 text-white">New</span>
</h2>
<h3 class="badge-container mb-2">
Example of Text with Badge
<span class="text-badge bg-sky-500 text-white">New</span>
</h3>
<h4 class="badge-container mb-2">
Example of Text with Badge
<span
class="text-badge bg-rose-500 rounded-pill-badge text-white"
>New</span
>
</h4>
<h5 class="badge-container">
Example of Text with Badge
<span class="text-badge bg-cyan-500 text-white">New</span>
</h5>