Avatar

A visual representation of a user, using <picture> and <img> natively with the @utility avatar.

User avatar
AB

Usage

avatar.html
<!-- Image Avatar -->
<picture>
  <source srcset="https://i.pravatar.cc/150?u=1" type="image/jpeg">
  <img src="https://i.pravatar.cc/150?u=1" alt="User avatar" class="avatar" />
</picture>

<!-- Initials Avatar -->
<div class="avatar color-group-primary">
  AB
</div>