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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<div class="space-y-4 p-4">
  <div>
    <div class="flex flex-col rounded-lg text-base bg-primary-50 border border-primary-200 text-primary-900 shadow-sm" >
      <div class="p-6 border-b border-primary-200">
        Primary
      </div>
      <div class="p-6">
        This is a primary card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-secondary-50 border border-secondary-200 text-secondary-900 shadow-sm" >
      <div class="p-6 border-b border-secondary-200">
        Secondary
      </div>
      <div class="p-6">
        This is a secondary card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-accent-50 border border-accent-200 text-accent-900 shadow-sm" >
      <div class="p-6 border-b border-accent-200">
        Accent
      </div>
      <div class="p-6">
        This is a accent card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-success-50 border border-success-200 text-success-900 shadow-sm" >
      <div class="p-6 border-b border-success-200">
        Success
      </div>
      <div class="p-6">
        This is a success card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-danger-50 border border-danger-200 text-danger-900 shadow-sm" >
      <div class="p-6 border-b border-danger-200">
        Danger
      </div>
      <div class="p-6">
        This is a danger card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-warning-50 border border-warning-200 text-warning-900 shadow-sm" >
      <div class="p-6 border-b border-warning-200">
        Warning
      </div>
      <div class="p-6">
        This is a warning card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-info-50 border border-info-200 text-info-900 shadow-sm" >
      <div class="p-6 border-b border-info-200">
        Info
      </div>
      <div class="p-6">
        This is a info card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-light border border-grayscale-200 text-grayscale-900 shadow-sm" >
      <div class="p-6 border-b border-grayscale-200">
        Light
      </div>
      <div class="p-6">
        This is a light card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
  <div>
    <div class="flex flex-col rounded-lg text-base bg-dark border border-grayscale-700 text-grayscale-50 shadow-sm" >
      <div class="p-6 border-b border-grayscale-700">
        Dark
      </div>
      <div class="p-6">
        This is a dark card demonstrating the color variant with solid style.
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="space-y-4 p-4">
  <% BetterUi::ApplicationComponent::VARIANTS.keys.each do |variant| %>
    <div>
      <%= render BetterUi::CardComponent.new(variant: variant, style: :solid) do |card| %>
        <% card.with_header { variant.to_s.capitalize } %>
        <% card.with_body { "This is a #{variant} card demonstrating the color variant with solid style." } %>
      <% end %>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.