Badge

Badges are used to highlight an item's status for quick recognition.

DEFAULT SUCCESS REMOVED NEW NEW NEW NEW 
          
            <span class="badge-item default-bdg">DEFAULT</span>
            <span class="badge-item success-bdg">SUCCESS</span>
            <span class="badge-item removed-bdg">REMOVED</span>
            <span class="badge-item new-purple-bdg">NEW</span>
            <span class="badge-item new-green-bdg">NEW</span>
            <span class="badge-item-sm new-purple-bdg">NEW</span>
            <span class="badge-item-sm new-green-bdg">NEW</span>

Badge on icons

In some cases, like social apps & ecommerce apps we need to show a badge on the top of the icon.

10
8
5
            
              <div class="badge-on-icon-container">
                <svg class="bell-icon"><path ...></path></svg>
                <div class="icon-badge blue ic-bdg-bell-top">10</div>
              </div>

              <div class="badge-on-icon-container">
                <svg class="heart-icon"><path ...></path></svg>
                <div class="icon-badge blue ic-bdg-heart-top">8</div>
              </div>

              <div class="badge-on-icon-container">
                <svg class="cart-icon"><path ...></path></svg>
                <div class="icon-badge blue ic-bdg-cart-top">5</div>
              </div>