Avatar

Displays user profile images or initials in a circular or rounded container.

Circle

<div class="d-10 rad-9 o-h">
  <img src="/img/people/rayhan-zua.jpg" alt="Avatar" class="w-full h-full of-c" />
</div>

Initials

<div class="d-10 rad-9 bg-blue-1 d-f ai-c jc-c">
  <p class="fs-md fw-600 tc-blue-8">RZ</p>
</div>

Indicator

<div class="p-r d-10">
  <div class="d-10 rad-9 o-h">
    <img src="/img/people/rayhan-zua.jpg" alt="Avatar" class="w-full h-full of-c" />
  </div>
  <div class="p-a r-0 bo-0 d-3 rad-9 bg-green b-2 bc-white"></div>
</div>

Label

@rayhanzua

<div class="d-f ai-c g-2">
  <div class="d-10 rad-9 o-h">
    <img src="/img/people/rayhan-zua.jpg" alt="Avatar" class="w-full h-full of-c" />
  </div>
  <div class="fs-sm fw-600 tc-slate-9">@rayhanzua</div>
</div>