x
1
2
3
4
5
6
7
8
9
10
<div class="space-y-8"> <div> <p class="text-sm text-muted-foreground mb-3">4 avatars, overlapping with ring separation</p> <div role="list" aria-label="Avatars" class="flex items-center -space-x-2"><span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">JD</span></span> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">AS</span></span> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">RM</span></span> <span class="relative flex shrink-0 overflow-hidden rounded-full h-10 w-10 text-sm bg-muted text-foreground/70 ring-2 ring-background" data-slot="avatar" role="listitem"><span class="flex h-full w-full items-center justify-center font-medium" aria-hidden="true">BK</span></span> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
<div class="space-y-8"> <div> <p class="text-sm text-muted-foreground mb-3">4 avatars, overlapping with ring separation</p> <%= render(UI::AvatarGroup.new) do |group| %> <% group.with_avatar { "JD" } %> <% group.with_avatar { "AS" } %> <% group.with_avatar { "RM" } %> <% group.with_avatar { "BK" } %> <% end %> </div></div>No notes provided.
No params configured.