Avatar

Avatars are used to show profile images in headers or profile information sections. They can be in multiple sizes. xs — for extra small, sm — for small, md — for medium, lg — for large, and xl for — extra large.

Round Avatars with Images

Use the class .avatar-round to create circular avatars.


<!-- Add URL in src -->
<div class="avatar">
  <img src="" class="avatar-round avatar-xs">
</div>
<div class="avatar avatar-border">
  <img src="" class="avatar-round avatar-sm">
</div>
<div class="avatar">
  <img src="" class="avatar-round avatar-md">
</div>
<div class="avatar avatar-border">
  <img src="" class="avatar-round avatar-lg">
</div>
<div class="avatar">
  <img src="" class="avatar-round avatar-xl">
</div>

Square Avatars with Images

Use the class .avatar-sq to create square shaped avatars


<!-- Add URL in src -->
<div class="avatar">
  <img src="" class="avatar-sq avatar-xs">
</div>
<div class="avatar">
  <img src="" class="avatar-sq avatar-sm">
</div>
<div class="avatar">
  <img src="" class="avatar-sq avatar-md">
</div>
<div class="avatar ">
  <img src="" class="avatar-sq avatar-lg">
</div>
<div class="avatar">
  <img src="" class="avatar-sq avatar-xl">
</div>

Avatars with Letters

Avatars can also be just letters in case the user has not uploaded any images. The user can choose background color from any of the below available ones


<!-- Add URL in src -->
<div class="avatar avatar-border">
  <div class="avatar-text avatar-xs avatar-round avatar-bg-blue">
    C
  </div>
</div>
<div class="avatar avatar-border">
  <div class="avatar-text avatar-md avatar-round avatar-bg-green">
    LH
  </div>
</div>
<div class="avatar avatar-border">
  <div class="avatar-text avatar-lg avatar-round avatar-bg-orange">
    TA
  </div>
</div>
<div class="avatar avatar-border">
  <div class="avatar-text avatar-xl avatar-round avatar-bg-red">
    JD
  </div>
</div>