Avatar

Use avater of different shapes and sizes with a single component.

Circular
<div class="avatar avatar-4xl">
  <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
</div>
Square
<div class="avatar avatar-4xl">
  <img src="../assets/img/team/2.jpg" alt="">
</div>
Soft
<div class="avatar avatar-4xl">
  <img class="rounded-soft" src="../assets/img/team/3.jpg" alt="" />
</div>
Content
12+
<div class="avatar avatar-4xl">
  <div class="avatar-name rounded-circle"><span>12+</span></div>
</div>
Name
EW
<div class="avatar avatar-4xl">
  <div class="avatar-name rounded-circle"><span>EW</span></div>
</div>
Emoji
🎁
<div class="avatar avatar-4xl">
  <div class="avatar-emoji rounded-circle"><span role="img" aria-label="Emoji">🎁</span></div>
</div>
Status
<div class="row align-items-center">
  <div class="col-auto">
    <div class="avatar avatar-4xl status-online">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl status-offline">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl status-away">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl status-do-not-disturb">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
</div>
Sizes
<div class="row align-items-center mt-4">
  <div class="col-auto">
    <div class="avatar avatar-5xl">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-3xl">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-2xl">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-xl">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-l">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-m">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-s">
      <img class="rounded-circle" src="../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
</div>