x
1
2
3
4
5
6
7
8
9
10
<div class="flex flex-wrap items-center gap-6"> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="text-xs text-muted-foreground">Circle (People)</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-md h-10 w-10 text-sm bg-muted text-foreground/70" data-slot="avatar"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">NS</span></span> <span class="text-xs text-muted-foreground">Rounded (Groups/Projects)</span> </div></div>1
2
3
4
5
6
7
8
9
10
<div class="flex flex-wrap items-center gap-6"> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(shape: :circle)) { "JD" } %> <span class="text-xs text-muted-foreground">Circle (People)</span> </div> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(shape: :rounded)) { "NS" } %> <span class="text-xs text-muted-foreground">Rounded (Groups/Projects)</span> </div></div>No notes provided.
No params configured.