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
<div class="space-y-6 p-4"> <div> <div class="text-left"> <div class="flex items-center justify-between"> <h1 class="text-4xl font-bold" ></h1> </div> <p class="mt-1 text-grayscale-500 text-lg">This is the h1 heading level with its default typography</p> </div> </div> <div> <div class="text-left"> <div class="flex items-center justify-between"> <h2 class="text-3xl font-semibold" ></h2> </div> <p class="mt-1 text-grayscale-500 text-base">This is the h2 heading level with its default typography</p> </div> </div> <div> <div class="text-left"> <div class="flex items-center justify-between"> <h3 class="text-2xl font-semibold" ></h3> </div> <p class="mt-1 text-grayscale-500 text-sm">This is the h3 heading level with its default typography</p> </div> </div> <div> <div class="text-left"> <div class="flex items-center justify-between"> <h4 class="text-xl font-medium" ></h4> </div> <p class="mt-1 text-grayscale-500 text-sm">This is the h4 heading level with its default typography</p> </div> </div> <div> <div class="text-left"> <div class="flex items-center justify-between"> <h5 class="text-lg font-medium" ></h5> </div> <p class="mt-1 text-grayscale-500 text-xs">This is the h5 heading level with its default typography</p> </div> </div> <div> <div class="text-left"> <div class="flex items-center justify-between"> <h6 class="text-base font-medium" ></h6> </div> <p class="mt-1 text-grayscale-500 text-xs">This is the h6 heading level with its default typography</p> </div> </div></div>1
2
3
4
5
6
7
<div class="space-y-6 p-4"> <% %i[h1 h2 h3 h4 h5 h6].each do |level| %> <div> <%= render BetterUi::HeadingComponent.new(level: level, subtitle: "This is the #{level} heading level with its default typography") { "#{level.to_s.upcase} Heading" } %> </div> <% end %></div>No notes provided.
No params configured.