Avatar

import { BuiAvatar } from 'ng-blatui';

<bui-avatar src="/shadcn.png" alt="@shadcn">CN</bui-avatar>

<bui-avatar>JD</bui-avatar>

<bui-avatar class="size-6" src="/u.png" alt="">CN</bui-avatar>
<bui-avatar class="size-8" src="/u.png" alt="">CN</bui-avatar>
<bui-avatar src="/u.png" alt="">CN</bui-avatar>
<bui-avatar class="size-12" src="/u.png" alt="">CN</bui-avatar>

<bui-avatar class="rounded-lg" src="/u.png" alt="">CN</bui-avatar>

<bui-avatar class="ring-ring ring-offset-background size-10 ring-2 ring-offset-2" src="/u.png" alt="">CN</bui-avatar>

<div class="flex -space-x-2 *:ring-2 *:ring-background">
  <bui-avatar src="/a.png" alt="">CN</bui-avatar>
  <bui-avatar src="/b.png" alt="">LR</bui-avatar>
  <bui-avatar>+3</bui-avatar>
</div>

<div class="relative inline-flex">
  <bui-avatar class="size-10" src="/u.png" alt="">CN</bui-avatar>
  <span class="border-background absolute end-0 bottom-0 size-3 rounded-full border-2 bg-green-600" aria-label="Online"></span>
</div>

<div class="relative inline-flex">
  <bui-avatar class="size-10" src="/u.png" alt="">CN</bui-avatar>
  <span class="bg-primary text-primary-foreground absolute -end-1.5 -top-1.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs">3</span>
</div>

<!-- overlap, then spread on hover -->
<div class="flex -space-x-3 transition-all hover:space-x-1">
  <bui-avatar class="ring-2 ring-background transition-all">JD</bui-avatar>
</div>