<div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-lg"> <div class="scl-badge scl-badge-online"></div> </div> <div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-lg"> <div class="scl-badge scl-badge-offline"></div> </div> <div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-md"> <div class="scl-badge scl-badge-away"></div> <div class="scl-badge-wrapper"> <img src="#" alt="avatar" class="scl-avatar scl-avatar-sm"> <div class="scl-badge scl-badge-busy"></div> </div>