x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex flex-wrap items-end 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"><img alt="User" class="aspect-square h-full w-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=face" /></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"><img alt="User" class="aspect-square h-full w-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=face" /></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"><img alt="User" class="aspect-square h-full w-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=face" /></span> <span class="text-xs text-muted-foreground">lg (48px)</span> </div></div>1
2
3
4
5
6
7
8
9
10
<div class="flex flex-wrap items-end gap-6"> <% { sm: 24, default: 40, lg: 48 }.each do |size, px| %> <div class="flex flex-col items-center gap-2"> <%= render(UI::Avatar.new(size: size)) do |avatar| %> <% avatar.with_image(src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=96&h=96&fit=crop&crop=face", alt: "User") %> <% end %> <span class="text-xs text-muted-foreground"><%= size %> (<%= px %>px)</span> </div> <% end %></div>No notes provided.
No params configured.