<!-- round large size avatar image with offline-status badge -->
           <div class="badge-container">
               <div class="avatar avatar-lg-round"><img loading="lazy" src="..." alt="avatar-image" class="img-responsive" />
               </div>
               <span class="status-badge status-offline"></span>
           </div>

           <!-- round medium size avatar letter with online badge -->
           <div class="badge-container">
               <div class="avatar text-avatar-md-round">IN</div>
               <span class="status-badge status-online"></span>
           </div>

           <!-- round small size avatar image with away-status badge -->
           <div class="badge-container">
               <div class="avatar avatar-sm-round"><img loading="lazy" src="..." alt="avatar-image" class="img-responsive" />
               </div>
               <span class="status-badge status-away"></span>
           </div>

           <!-- round extra-small size avatar image with offline badge -->
           <div class="badge-container">
               <div class="avatar avatar-xsm-round"><img loading="lazy" src="..." alt="avatar-image" class="img-responsive" />
               </div>
               <span class="status-badge status-offline"></span>
           </div>