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
93
94
95
96
97
<div class="space-y-8 p-4"> <div> <h3 class="text-sm font-semibold text-grayscale-700 mb-2">Solid (default)</h3> <hr class="border-solid border-t-4 border-grayscale-300 my-4" > </div> <div> <h3 class="text-sm font-semibold text-grayscale-700 mb-2">Dashed</h3> <hr class="border-dashed border-t-4 border-grayscale-300 my-4" > </div> <div> <h3 class="text-sm font-semibold text-grayscale-700 mb-2">Dotted</h3> <hr class="border-dotted border-t-4 border-grayscale-300 my-4" > </div> <hr class="my-8 border-grayscale-200"> <h3 class="text-sm font-semibold text-grayscale-700 mb-4">Sizes</h3> <div> <p class="text-xs text-grayscale-500 mb-1">Extra Small (xs)</p> <hr class="border-solid border-t border-grayscale-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Small (sm)</p> <hr class="border-solid border-t-2 border-grayscale-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Medium (md)</p> <hr class="border-solid border-t-4 border-grayscale-300 my-4" > </div> <hr class="my-8 border-grayscale-200"> <h3 class="text-sm font-semibold text-grayscale-700 mb-4">Variants</h3> <div> <p class="text-xs text-grayscale-500 mb-1">Default (nil)</p> <hr class="border-solid border-t-2 border-grayscale-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Primary</p> <hr class="border-solid border-t-2 border-primary-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Secondary</p> <hr class="border-solid border-t-2 border-secondary-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Accent</p> <hr class="border-solid border-t-2 border-accent-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Success</p> <hr class="border-solid border-t-2 border-success-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Danger</p> <hr class="border-solid border-t-2 border-danger-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Warning</p> <hr class="border-solid border-t-2 border-warning-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Info</p> <hr class="border-solid border-t-2 border-info-300 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Light</p> <hr class="border-solid border-t-2 border-grayscale-200 my-4" > </div> <div> <p class="text-xs text-grayscale-500 mb-1">Dark</p> <hr class="border-solid border-t-2 border-grayscale-600 my-4" > </div> <hr class="my-8 border-grayscale-200"> <h3 class="text-sm font-semibold text-grayscale-700 mb-4">Spacing</h3> <div class="bg-grayscale-100 rounded"> <p class="text-xs text-grayscale-500 px-2 pt-1">xs spacing</p> <hr class="border-solid border-t-4 border-primary-300 my-1" > <p class="text-xs text-grayscale-500 px-2 pb-1">Content below</p> </div> <div class="bg-grayscale-100 rounded"> <p class="text-xs text-grayscale-500 px-2 pt-1">sm spacing</p> <hr class="border-solid border-t-4 border-primary-300 my-2" > <p class="text-xs text-grayscale-500 px-2 pb-1">Content below</p> </div> <div class="bg-grayscale-100 rounded"> <p class="text-xs text-grayscale-500 px-2 pt-1">md spacing</p> <hr class="border-solid border-t-4 border-primary-300 my-4" > <p class="text-xs text-grayscale-500 px-2 pb-1">Content below</p> </div> <div class="bg-grayscale-100 rounded"> <p class="text-xs text-grayscale-500 px-2 pt-1">lg spacing</p> <hr class="border-solid border-t-4 border-primary-300 my-6" > <p class="text-xs text-grayscale-500 px-2 pb-1">Content below</p> </div> <div class="bg-grayscale-100 rounded"> <p class="text-xs text-grayscale-500 px-2 pt-1">xl spacing</p> <hr class="border-solid border-t-4 border-primary-300 my-8" > <p class="text-xs text-grayscale-500 px-2 pb-1">Content below</p> </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
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
<div class="space-y-8 p-4"> <div> <h3 class="text-sm font-semibold text-grayscale-700 mb-2">Solid (default)</h3> <%= render BetterUi::DividerComponent.new(style: :solid) %> </div> <div> <h3 class="text-sm font-semibold text-grayscale-700 mb-2">Dashed</h3> <%= render BetterUi::DividerComponent.new(style: :dashed) %> </div> <div> <h3 class="text-sm font-semibold text-grayscale-700 mb-2">Dotted</h3> <%= render BetterUi::DividerComponent.new(style: :dotted) %> </div> <hr class="my-8 border-grayscale-200"> <h3 class="text-sm font-semibold text-grayscale-700 mb-4">Sizes</h3> <div> <p class="text-xs text-grayscale-500 mb-1">Extra Small (xs)</p> <%= render BetterUi::DividerComponent.new(size: :xs) %> </div> <div> <p class="text-xs text-grayscale-500 mb-1">Small (sm)</p> <%= render BetterUi::DividerComponent.new(size: :sm) %> </div> <div> <p class="text-xs text-grayscale-500 mb-1">Medium (md)</p> <%= render BetterUi::DividerComponent.new(size: :md) %> </div> <hr class="my-8 border-grayscale-200"> <h3 class="text-sm font-semibold text-grayscale-700 mb-4">Variants</h3> <% [nil, :primary, :secondary, :accent, :success, :danger, :warning, :info, :light, :dark].each do |variant| %> <div> <p class="text-xs text-grayscale-500 mb-1"><%= variant ? variant.to_s.capitalize : "Default (nil)" %></p> <%= render BetterUi::DividerComponent.new(variant: variant, size: :sm) %> </div> <% end %> <hr class="my-8 border-grayscale-200"> <h3 class="text-sm font-semibold text-grayscale-700 mb-4">Spacing</h3> <% BetterUi::DividerComponent::SPACINGS.each do |spacing| %> <div class="bg-grayscale-100 rounded"> <p class="text-xs text-grayscale-500 px-2 pt-1"><%= spacing %> spacing</p> <%= render BetterUi::DividerComponent.new(spacing: spacing, variant: :primary) %> <p class="text-xs text-grayscale-500 px-2 pb-1">Content below</p> </div> <% end %></div>No notes provided.
No params configured.