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
<div class="space-y-6 p-4">
  <div class="border border-grayscale-200 rounded-lg p-4">
    <div class="text-left border-b border-grayscale-200 pb-3">
      <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 heading is aligned to the left</p>
    </div>
  </div>
  <div class="border border-grayscale-200 rounded-lg p-4">
    <div class="text-center border-b border-grayscale-200 pb-3">
      <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 heading is aligned to the center</p>
    </div>
  </div>
  <div class="border border-grayscale-200 rounded-lg p-4">
    <div class="text-right border-b border-grayscale-200 pb-3">
      <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 heading is aligned to the right</p>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="space-y-6 p-4">
  <% %i[left center right].each do |align| %>
    <div class="border border-grayscale-200 rounded-lg p-4">
      <%= render BetterUi::HeadingComponent.new(
        level: :h3,
        align: align,
        subtitle: "This heading is aligned to the #{align}",
        divider: true
      ) { "#{align.to_s.capitalize} Aligned" } %>
    </div>
  <% end %>
</div>

No notes provided.

No params configured.