Documentation | Graindashboard UI Kit

Avatars

Avatar Sizes

Avatar classes are applied to the image to scale images properly.

Result
HTML

<img class="avatar-xs rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
<img class="avatar-sm rounded-circle" src="img/avatar-1.jpg" alt="Image Description">
<img class="avatar rounded-circle" src="img/avatar-1.jpg" alt="Image Description">
<img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image Description">
<img class="avatar-xl rounded-circle" src="img/avatar-1.jpg" alt="Image Description">

Avatar Statuses

Result
HTML


  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-secondary rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-primary-darker rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-danger rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-warning rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left bg-light rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>