Badges are displayed on apps and folder icons on your Home screen to notify you of something.
<div class="badge-icon badge-wrapper">
<i class="fa fa-shopping-cart"></i>
<span class="badge-number primary-bgcolor">4</span>
</div>
<div class="badge-icon badge-wrapper">
<i class="fa fa-envelope"></i>
<span class="badge-number primary-bgcolor">4</span>
</div>
<div class="badge-icon badge-wrapper">
<i class="fa fa-user-circle-o"></i>
<span class="badge-number primary-bgcolor">4</span>
</div>
<div class="avatar avatar-lg-size badge-wrapper">
<img src="https://picsum.photos/200?random=5" class="img-responsive img-round" alt="avatar">
<div class="badge-status-circle badge-status-online badge-lg-circle badge-lg"></div>
</div>
<div class="avatar-square avatar-md-size badge-wrapper">
<img src="https://picsum.photos/200?random=6" class="img-responsive img-square" alt="avatar">
<div class="badge-status-circle badge-status-offline badge-md"></div>
</div>
<div class="avatar avatar-sm-size badge-wrapper">
<img src="https://picsum.photos/200?random=7" class="img-responsive img-round" alt="avatar">
<div class="badge-status-circle badge-status-ideal badge-sm-circle badge-sm"></div>
</div>
<div class="avatar-square avatar-xs-size badge-wrapper">
<img src="https://picsum.photos/200?random=8" class="img-responsive img-square" alt="avatar">
<div class="badge-status-circle badge-status-away badge-xs"></div>
</div>
<div class="avatar-square avatar-lg-size avatar-text badge-wrapper avatar-primary">TS
<div class="badge-status-circle badge-status-online badge-lg"></div>
</div>
<div class="avatar avatar-md-size avatar-text badge-wrapper avatar-primary">TS
<div class="badge-status-circle badge-status-offline badge-md-circle badge-md"></div>
</div>
<div class="avatar-square avatar-sm-size avatar-text badge-wrapper avatar-primary">TS
<div class="badge-status-circle badge-status-away badge-sm"></div>
</div>
<div class="avatar avatar-xs-size avatar-text badge-wrapper avatar-primary">TS
<div class="badge-status-circle badge-status-ideal badge-xs-circle badge-xs"></div>
</div>
Badge with p heading
New
<div class="badge-wrapper">
<h1 class="wrap-inline">Badge with h1 heading</h1>
<span class="badge-text badge-box-square fire-bgcolor">New</span>
</div>
<div class="badge-wrapper">
<h2 class="wrap-inline">Badge with h2 heading</h2>
<span class="badge-text badge-box-square secondary-bgcolor">New</span>
</div>
<div class="badge-wrapper">
<h3 class="wrap-inline">Badge with h3 heading</h3>
<span class="badge-text badge-box-round success-bgcolor">Updated</span>
</div>
<div class="badge-wrapper">
<h4 class="wrap-inline">Badge with h4 heading</h4>
<span class="badge-text badge-box-square primary-bgcolor">New</span>
</div>
<div class="badge-wrapper">
<h5 class="wrap-inline">Badge with h5 heading</h5>
<span class="badge-text badge-box-square fire-bgcolor">Update</span>
</div>
<div class="badge-wrapper">
<p class="wrap-inline">Badge with p heading</p>
<span class="badge-text badge-box-round secondary-bgcolor">New</span>
</div>
<div class="badge-wrapper">
<span class="badge-text badge-box-square fire-bgcolor badge-over-image">New</span>
<img src="https://picsum.photos/200" class="img-responsive">
</div>