<!--Online--> 
<div class="avatar sm-gutter img-badge">
     <img class="full-brr img-md" src="../../images/profile_pic.jpg" alt="" />
     <div class="notif-green img-xxs full-brr xs-padding"></div>
 </div>

<!-- Offline-->
 <div class="avatar sm-gutter img-badge">
     <img class="full-brr img-md" src="../../images/profile_pic.jpg" alt="" />
     <div class="notif-red img-xxs full-brr xs-padding"></div>
 </div>