BetterUi Components

Previews

No matching results.

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-center gap-6 p-4">
  <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">
        A
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Alice</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-secondary-100 text-secondary-700 flex items-center justify-center font-medium">
        BS
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Bob Smith</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-accent-100 text-accent-700 flex items-center justify-center font-medium">
        CB
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Charlie Brown</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-success-100 text-success-700 flex items-center justify-center font-medium">
        D
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Diana</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-danger-100 text-danger-700 flex items-center justify-center font-medium">
        EN
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Edward Norton</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-warning-100 text-warning-700 flex items-center justify-center font-medium">
        FA
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Fiona Apple</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-info-100 text-info-700 flex items-center justify-center font-medium">
        G
      </div>
    </div>
    <span class="text-sm text-grayscale-600">George</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-grayscale-100 text-grayscale-700 flex items-center justify-center font-medium">
        HT
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Helen Troy</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-grayscale-800 text-grayscale-100 flex items-center justify-center font-medium">
        ID
      </div>
    </div>
    <span class="text-sm text-grayscale-600">Ivan Drago</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
<div class="flex flex-wrap items-center gap-6 p-4">
  <% [
    ["Alice", :primary],
    ["Bob Smith", :secondary],
    ["Charlie Brown", :accent],
    ["Diana", :success],
    ["Edward Norton", :danger],
    ["Fiona Apple", :warning],
    ["George", :info],
    ["Helen Troy", :light],
    ["Ivan Drago", :dark]
  ].each do |name, variant| %>
    <div class="flex flex-col items-center gap-2">
      <%= render BetterUi::AvatarComponent.new(
        name: name,
        variant: variant,
        size: :lg
      ) %>
      <span class="text-sm text-grayscale-600"><%= name %></span>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.