<section class="section section-tokens" aria-labelledby="avatar-heading">
  <h2 id="avatar-heading">Avatar</h2>

  <h3>Sizes</h3>
  <div class="cluster">
    <span class="avatar avatar-xs">AB</span>
    <span class="avatar avatar-sm">AB</span>
    <span class="avatar avatar-md">AB</span>
    <span class="avatar avatar-lg">AB</span>
    <span class="avatar avatar-xl">AB</span>
  </div>

  <h3>Initials</h3>
  <div class="cluster">
    <span class="avatar avatar-md avatar-primary">JD</span>
    <span class="avatar avatar-md avatar-secondary">MK</span>
    <span class="avatar avatar-md avatar-accent">VL</span>
  </div>

  <h3>Image</h3>
  <div class="cluster">
    <img class="avatar avatar-md" src="/assets/avatar-placeholder.png" alt="User avatar">
  </div>

  <h3>Icon avatar</h3>
  <div class="cluster">
    <span class="avatar avatar-md avatar-icon"><i class="ph ph-user"></i></span>
  </div>

  <h3>Status dot</h3>
  <div class="cluster">
    <span class="avatar avatar-md avatar-primary" data-status="online">JD</span>
    <span class="avatar avatar-md avatar-secondary" data-status="away">MK</span>
    <span class="avatar avatar-md avatar-accent" data-status="offline">VL</span>
    <span class="avatar avatar-md avatar-danger" data-status="busy">AW</span>
  </div>
</section>