Avatar Anatomy

    <div class="layout__row gap-2">
  <.avatar src="" class="avatar">
    <:fallback>JD</:fallback>
  </.avatar>
  <.avatar src="/images/avatar.png" alt="Avatar" class="avatar">
    <:fallback>?</:fallback>
  </.avatar>
  <.avatar src="/images/favicon.ico" alt="Favicon" class="avatar">
    <:fallback>FX</:fallback>
  </.avatar>
</div>

  

    <div class="flex flex-col gap-8 items-center w-full">
  <div class="flex flex-col gap-2 items-center w-full">
    <.avatar src="" class="avatar">
      <:fallback>
        <span class="font-semibold">AB</span>
      </:fallback>
    </.avatar>
  </div>
  <div class="flex flex-col gap-2 items-center w-full">
    <div class="layout__row gap-4 items-center">
      <.avatar src="" class="avatar">
        <:value :let={src}>
          {if src, do: "IMG", else: " - "}
        </:value>
      </.avatar>
      <.avatar src="https://example.com/photo.jpg" class="avatar">
        <:value :let={src}>
          {if src, do: "IMG", else: " - "}
        </:value>
      </.avatar>
    </div>
  </div>
</div>