Badge

The Badge component is a kind of sub-script or super-script to any image, icon, avatar etc.
A Badge is generally used to display the online status on avatars, or the count of notifications or emails etc.

Badge Over Text

This Badge can be seen in the websites or Apllications with a new keyword over it.
eg :- Social sites and Applications releases new notifications.

Give it a try by just copying the code below or mention the class name "badge-container text-badge1" in your div tag which you want to make a badge.

---

Badge on Avatar

This Badge is very common and can be seen defining our status as online, offline, busy, in the call etc in social appliactions.
eg :- Social sites and Applications.

Give it a try by just copying the code below or mention the class name "avatar-img avatar-text offline" in your img tag which you want to make an Avatar.

---

Badge on Icon

This badge is also very common and can be seen mostly when we get notifications on our mobile phone the specific icon of that application has a badge with count of notifications.
eg :- Gmail, Whatsapp, Instaram, Microsoft Teams.

Give it a try by just copying the code below or mention the class name "avatar=img icon-img count" in your img tag which you want to make a Badge.

---