Avatar

<!-- Block avatar -->
<div class="flex gap-20px">
  <!-- L With image -->
  <div class="flex rounded-full w-48px h-48px overflow-hidden">
      <img src="https://images.unsplash.com/flagged/photo-1595514191830-3e96a518989b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3ODgwODB8MHwxfGFsbHx8fHx8fHx8fDE3NTY1NzI0NzB8&ixlib=rb-4.1.0&q=80&w=200&utm_source=Kaida&utm_medium=referral&utm_campaign=api-credit"
        class="object-cover w-full h-full"
        loading="lazy"
        alt="temp avatar" />
    </div>

  <!-- L Empty image -->
  <div class="flex rounded-full w-48px h-48px items-center justify-center bg-black-100 overflow-hidden">
    <span class="text-p1 text-black-500">J</span>
  </div>

  <!-- M With image -->
  <div class="flex rounded-full w-32px h-32px overflow-hidden">
      <img src="https://images.unsplash.com/flagged/photo-1595514191830-3e96a518989b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3ODgwODB8MHwxfGFsbHx8fHx8fHx8fDE3NTY1NzI0NzB8&ixlib=rb-4.1.0&q=80&w=200&utm_source=Kaida&utm_medium=referral&utm_campaign=api-credit"
        class="object-cover w-full h-full"
        loading="lazy"
        alt="temp avatar" />
    </div>

  <!-- M Empty image -->
  <div class="flex rounded-full w-32px h-32px items-center justify-center bg-black-100 overflow-hidden">
    <span class="text-p3 text-black-500">J</span>
  </div>
  
  <!-- S With image -->
  <div class="flex rounded-full w-24px h-24px overflow-hidden">
      <img src="https://images.unsplash.com/flagged/photo-1595514191830-3e96a518989b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3ODgwODB8MHwxfGFsbHx8fHx8fHx8fDE3NTY1NzI0NzB8&ixlib=rb-4.1.0&q=80&w=200&utm_source=Kaida&utm_medium=referral&utm_campaign=api-credit"
        class="object-cover w-full h-full"
        loading="lazy"
        alt="temp avatar" />
    </div>

  <!-- S Empty image -->
  <div class="flex rounded-full w-24px h-24px items-center justify-center bg-black-100 overflow-hidden">
    <span class="text-p3 text-black-500">J</span>
  </div>
</div>

<!-- Inline avatar -->
<div class="flex flex-col gap-16px">
  <!-- With image -->
  
  <div class="flex gap-12px items-center">
    <div class="flex rounded-full w-32px h-32px overflow-hidden">
      <img src="https://images.unsplash.com/flagged/photo-1595514191830-3e96a518989b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3ODgwODB8MHwxfGFsbHx8fHx8fHx8fDE3NTY1NzI0NzB8&ixlib=rb-4.1.0&q=80&w=200&utm_source=Kaida&utm_medium=referral&utm_campaign=api-credit"
        class="object-cover w-full h-full"
        loading="lazy"
        alt="temp avatar" />
    </div>
    <p class="text-p2">John Doe</p>
  </div>

  <!-- Empty image -->
  
  <div class="flex gap-12px items-center">
    <div class="flex rounded-full w-32px h-32px items-center justify-center bg-black-100 overflow-hidden">
    <span class="text-p3 text-black-500">J</span>
  </div>
    <p class="text-p2">John Doe</p>
  </div>
</div>