Badges

Badge is used to show the status information of the user or notification number or number of items in the cart.

Badge on Avatar

Badge on Avatar can be used to show different user status, such as offline, idle and online. Use class badge-L, badge or badge-S according to size of the avatar used. Regular size is set as default for badge class.

Refer the below code to use different variations of badges on avatar. Make changes as per your requirements.

Copy
            <div class="badge-container pos-relative">
              <figure class="avatar avatar-L">
                <img
                  class="img-responsive img-round"
                  src="../../Assets/avatar-male.jpg"
                  alt="avatar"
                />
              </figure>
              <div class="badge pos-abs flex-center badge-L online"></div>
            </div>
            <div class="badge-container pos-relative">
              <figure class="avatar">
                <img
                  class="img-responsive img-round"
                  src="../../Assets/avatar-female.jpg"
                  alt="avatar"
                />
              </figure>
              <div class="badge pos-abs flex-center idle"></div>
            </div>
            <div class="badge-container pos-relative">
              <figure class="avatar avatar-S">
                <img
                  class="img-responsive img-round"
                  src="../../Assets/avatar-dog.jpg"
                  alt="avatar"
                />
              </figure>
              <div class="badge pos-abs flex-center badge-S offline"></div>
            </div>

Badge on Icon

Badge on Icon can be used to show count information.

1

Refer the below code to use different variations of badges on icon. Make changes as per your requirements.

Copy
            <div class="badge-icon-container pos-relative">
              <div>
                <i class="fas fa-bell fa-3x"></i>
              </div>
              <div class="notification-icon badge pos-abs flex-center">1</div>
            </div>
            <div class="badge-icon-container pos-relative">
              <div>
                <i class="fas fa-envelope fa-3x"></i>
                <div class="notification-icon badge pos-abs flex-center">1</div>
              </div>
            </div>
            <div class="badge-icon-container pos-relative">
              <div>
                <i class="fas fa-shopping-cart fa-3x"></i>
                <div class="notification-icon badge pos-abs flex-center">1</div>
              </div>
            </div>