x
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">Small avatars stacked (size: :sm)</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> <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">CD</span></span> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
<div class="space-y-8"> <div> <p class="text-sm text-muted-foreground mb-3">Small avatars stacked (size: :sm)</p> <%= render(UI::AvatarGroup.new(size: :sm)) do |group| %> <% group.with_avatar { "JD" } %> <% group.with_avatar { "AS" } %> <% group.with_avatar { "RM" } %> <% group.with_avatar { "BK" } %> <% group.with_avatar { "CD" } %> <% end %> </div></div>No notes provided.
No params configured.