open_in_new content_copy 
<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>