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
<div class="space-y-4 p-4"> <div> <div class="flex flex-col rounded text-xs bg-primary-50 border border-primary-200 text-primary-900 shadow-sm" > <div class="p-3 border-b border-primary-200"> Size: XS </div> <div class="p-3"> This card demonstrates the xs size variant with appropriate padding and text sizing. </div> </div> </div> <div> <div class="flex flex-col rounded-md text-sm bg-primary-50 border border-primary-200 text-primary-900 shadow-sm" > <div class="p-4 border-b border-primary-200"> Size: SM </div> <div class="p-4"> This card demonstrates the sm size variant with appropriate padding and text sizing. </div> </div> </div> <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"> Size: MD </div> <div class="p-6"> This card demonstrates the md size variant with appropriate padding and text sizing. </div> </div> </div> <div> <div class="flex flex-col rounded-lg text-lg bg-primary-50 border border-primary-200 text-primary-900 shadow-sm" > <div class="p-8 border-b border-primary-200"> Size: LG </div> <div class="p-8"> This card demonstrates the lg size variant with appropriate padding and text sizing. </div> </div> </div> <div> <div class="flex flex-col rounded-xl text-xl bg-primary-50 border border-primary-200 text-primary-900 shadow-sm" > <div class="p-10 border-b border-primary-200"> Size: XL </div> <div class="p-10"> This card demonstrates the xl size variant with appropriate padding and text sizing. </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
<div class="space-y-4 p-4"> <% [:xs, :sm, :md, :lg, :xl].each do |size| %> <div> <%= render BetterUi::CardComponent.new(size: size) do |card| %> <% card.with_header { "Size: #{size.to_s.upcase}" } %> <% card.with_body { "This card demonstrates the #{size} size variant with appropriate padding and text sizing." } %> <% end %> </div> <% end %></div>No notes provided.
No params configured.