@@include('docs/_sidebar.html', {"page": "elements-avatars"})

Letters

Use any size between .w-1 / .h-1 and .w-25 / .h-25 to change the avatar size.

TC AH CH

View example's code

<span class="avatar bg-primary text-white w-15 h-15">
  <span>TC</span>
</span>

<span class="avatar bg-pale-primary text-primary w-12 h-12">
  <span>AH</span>
</span>

<span class="avatar bg-soft-primary text-primary w-10 h-10">
  <span>CH</span>
</span>

Image

Use any size between .w-1 and .w-25 to change the image size. Image height will change automatically. Make sure to use images with 1:1 ratio to avoid stretching.

View example's code

<img class="avatar w-15" src="..." alt="" />
  
<img class="avatar w-12" src="..." alt="" />

<img class="avatar w-10" src="..." alt="" />

Avatars

Letters

Image