x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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-6 w-6 text-xs 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">sm (24px)</span> </div> <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">default (40px)</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-12 w-12 text-base 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">lg (48px)</span> </div> <div class="flex flex-col items-center gap-2"> <span class="relative flex shrink-0 overflow-hidden rounded-full h-16 w-16 text-lg 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">xl (64px)</span> </div></div>1
2
3
4
5
6
7
8
<div class="flex flex-wrap items-center gap-6"> <% { sm: 24, default: 40, lg: 48, xl: 64 }.each do |size, px| %> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(size: size)) { "JD" } %> <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span> </div> <% end %></div>No notes provided.
No params configured.