Badge
A badge is used to send information as notification. It could be a text message or number or a status update.
Badge on Profile
Wrap an image in a container with class as 'bdg'. Along with image tag pass an inline tag like span with class name as 'bdg--profile'. To control size pass 'sml', 'med' or 'lrg' for small, medium and large respectively.
Copied!
<div class="bdg">
<img src="image.png" alt="Avatar" class="avatar avatar--sm"/>
<span class="bdg--profile sml"></span>
</div>
<div class="bdg">
<img src="image.png" alt="Avatar" class="avatar avatar--sm"/>
<span class="bdg--profile med"></span>
</div>
<div class="bdg">
<img src="image.png" alt="Avatar" class="avatar avatar--sm"/>
<span class="bdg--profile lrg"></span>
</div>
Badge on Icons
Pick any icon and put icon-badge attribute in it. Attribute holds the contianed value for that badge.
Copied!
<i icon-badge="7" bdg-size="extra" class="fas fa-shopping-cart xl"></i>
<i icon-badge="7" bdg-size="large" class="fas fa-shopping-cart lg"></i>
<i icon-badge="7" bdg-size="medium" class="fas fa-shopping-cart md"></i>
<i icon-badge="7" bdg-size="small" class="fas fa-shopping-cart sm"></i>