x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<div class="flex flex-wrap items-end gap-6 p-4"> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <div class="w-6 h-6 text-xs rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-medium"> JD </div> </div> <span class="text-sm text-grayscale-600">xs</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <div class="w-8 h-8 text-sm rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-medium"> JD </div> </div> <span class="text-sm text-grayscale-600">sm</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <div class="w-10 h-10 text-base rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-medium"> JD </div> </div> <span class="text-sm text-grayscale-600">md</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <div class="w-14 h-14 text-lg rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-medium"> JD </div> </div> <span class="text-sm text-grayscale-600">lg</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <div class="w-20 h-20 text-xl rounded-full bg-primary-100 text-primary-700 flex items-center justify-center font-medium"> JD </div> </div> <span class="text-sm text-grayscale-600">xl</span> </div></div><div class="flex flex-wrap items-end gap-6 p-4 mt-4"> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <img src="https://i.pravatar.cc/150?u=xs" alt="Avatar xs" class="w-6 h-6 text-xs rounded-full object-cover" /> </div> <span class="text-sm text-grayscale-600">xs</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <img src="https://i.pravatar.cc/150?u=sm" alt="Avatar sm" class="w-8 h-8 text-sm rounded-full object-cover" /> </div> <span class="text-sm text-grayscale-600">sm</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <img src="https://i.pravatar.cc/150?u=md" alt="Avatar md" class="w-10 h-10 text-base rounded-full object-cover" /> </div> <span class="text-sm text-grayscale-600">md</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <img src="https://i.pravatar.cc/150?u=lg" alt="Avatar lg" class="w-14 h-14 text-lg rounded-full object-cover" /> </div> <span class="text-sm text-grayscale-600">lg</span> </div> <div class="flex flex-col items-center gap-2"> <div class="relative inline-flex "> <img src="https://i.pravatar.cc/150?u=xl" alt="Avatar xl" class="w-20 h-20 text-xl rounded-full object-cover" /> </div> <span class="text-sm text-grayscale-600">xl</span> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="flex flex-wrap items-end gap-6 p-4"> <% [:xs, :sm, :md, :lg, :xl].each do |size| %> <div class="flex flex-col items-center gap-2"> <%= render BetterUi::AvatarComponent.new( name: "John Doe", variant: :primary, size: size ) %> <span class="text-sm text-grayscale-600"><%= size %></span> </div> <% end %></div><div class="flex flex-wrap items-end gap-6 p-4 mt-4"> <% [:xs, :sm, :md, :lg, :xl].each do |size| %> <div class="flex flex-col items-center gap-2"> <%= render BetterUi::AvatarComponent.new( src: "https://i.pravatar.cc/150?u=#{size}", alt: "Avatar #{size}", size: size ) %> <span class="text-sm text-grayscale-600"><%= size %></span> </div> <% end %></div>No notes provided.
No params configured.