Avatars

Examples of size and use of avatars classes

Avatars come with 5 differnt sizes. you can extend it with iconbox utility classes. if those don't match with your need you can always customize it with sass at ../components/avatars.css and add your own size.

Sizing

<div class="avatar avatar-xs">
  <img class="avatar__img rounded-circle" src="../assets/img/avatars/43.jpg" alt="">
</div>
<div class="avatar avatar-sm">
  <img class="avatar__img rounded-circle" src="../assets/img/avatars/43.jpg" alt="">
</div>
<div class="avatar">
  <img class="avatar__img rounded-circle" src="../assets/img/avatars/43.jpg" alt="">
</div>
<div class="avatar avatar-lg">
  <img class="avatar__img rounded-circle" src="../assets/img/avatars/43.jpg" alt="">
</div>
<div class="avatar avatar-xl">
  <img class="avatar__img rounded-circle" src="../assets/img/avatars/43.jpg" alt="">
</div>

Avatar with text

Avatars also can be used with words and can be extend with the help of utility classes

SB
SB
SB
SB
SB 
<div class="avatar avatar-xs">
  <span class="avatar__text">SB</span>
</div>
<div class="avatar avatar-sm">
  <span class="avatar__text bg-secondary">SB</span>
</div>
<div class="avatar">
  <span class="avatar__text bg-info">SB</span>
</div>
<div class="avatar avatar-lg">
  <span class="avatar__text bg-warning">SB</span>
</div>
<div class="avatar avatar-xl">
  <span class="avatar__text bg-info">SB</span>
</div>

User status indicator

User status indicator come with 3 type. to show the indicator use indicator classes .user-online, .user-offline, .user-away 

<div class="avatar avatar-sm user-away mr-2">
    <img class="avatar__img" src="../assets/img/avatars/43.jpg" alt="">
  </div>
  <div class="avatar user-offline mr-2">
    <img class="avatar__img" src="../assets/img/avatars/43.jpg" alt="">
  </div>
  <div class="avatar user-online avatar-lg mr-2">
    <img class="avatar__img" src="../assets/img/avatars/43.jpg" alt="">
  </div>

Avatars group

Avatars with anchor group and tooltip support. Sizing work like same 

<div class="avatar-group">
    <div class="avatar">
      <a href="#" data-toggle="tooltip" title="Alex Labby">
        <img class="avatar__img" src="../assets/img/avatars/43.jpg" alt="">
      </a>
    </div>
    <div class="avatar">
      <a href="#" data-toggle="tooltip" title="John Doe">
        <img class="avatar__img" src="../assets/img/avatars/44.jpg" alt="">
      </a>
    </div>
    <div class="avatar">
      <a href="#" data-toggle="tooltip" title="Jaman">
        <img class="avatar__img" src="../assets/img/avatars/45.jpg" alt="">
      </a>
    </div>
    <div class="avatar">
      <a href="#" data-toggle="tooltip" title="H Roy">
        <img class="avatar__img" src="../assets/img/avatars/10.jpg" alt="">
      </a>
    </div>
  </div>