Basic Avatar

<div class="avatar-basic__demo flex--row">
  <div class="avatar">
    <img src="/assets/avatar.jpg" alt="avatar" class="avatar__img" />
  </div>
  <div class="avatar">
    <span class="material-icons md-48 avatar__icon">person</span>
  </div>
  <div class="avatar">
    <p class="avatar__txt">A</p>
  </div>
</div>

---

Avatar with status: offline

<div class="avatar-basic__demo avatar--badge flex--row">
  <div class="avatar">
    <img src="/assets/avatar.jpg" alt="avatar" class="avatar__img" />
    <div class="status-circle offline"></div>
  </div>
  <div class="avatar">
    <span class="material-icons md-48 avatar__icon">person</span>
    <div class="status-circle offline"></div>
  </div>
  <div class="avatar">
    <p class="avatar__txt">A</p>
    <div class="status-circle offline"></div>
  </div>
</div>

Avatar with status: online

<div class="avatar-basic__demo avatar--badge flex--row">
  <div class="avatar">
    <img src="/assets/avatar.jpg" alt="avatar" class="avatar__img" />
    <div class="status-circle online"></div>
  </div>
  <div class="avatar">
    <span class="material-icons md-48 avatar__icon">person</span>
    <div class="status-circle online"></div>
  </div>
  <div class="avatar">
    <p class="avatar__txt">A</p>
    <div class="status-circle online"></div>
  </div>
</div>

Avatar with status: busy

<div class="avatar-basic__demo avatar--badge flex--row">
  <div class="avatar">
    <img src="/assets/avatar.jpg" alt="avatar" class="avatar__img" />
    <div class="status-circle busy"></div>
  </div>
  <div class="avatar">
    <span class="material-icons md-48 avatar__icon">person</span>
    <div class="status-circle busy"></div>
  </div>
  <div class="avatar">
    <p class="avatar__txt">A</p>
    <div class="status-circle busy"></div>
  </div>
</div>

Avatar with notications badge

<div class="avatar-basic__demo avatar--badge flex--row">
  <div class="avatar">
    <img src="/assets/avatar.jpg" alt="avatar" class="avatar__img" />
    <div class="status-circle notification">2</div>
  </div>
  <div class="avatar">
    <span class="material-icons md-48 avatar__icon">person</span>
    <div class="status-circle notification">1</div>
  </div>
  <div class="avatar">
    <p class="avatar__txt">A</p>
    <div class="status-circle notification">8</div>
  </div>
</div>

Avatar stacked

<div class="avatar-basic__demo flex--row">
  <div class="avatar">
    <img src="/assets/avatar.jpg" alt="avatar " class="avatar__img" />
  </div>
  <div class="avatar avatar--stacked">
    <span class="material-icons md-48 avatar__icon">person</span>
  </div>
  <div class="avatar avatar--stacked">
    <p class="avatar__txt">A</p>
  </div>
</div>