BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<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">
    Normal Header (with padding)
  </div>
  <div class="">
    <div class='bg-gradient-to-b from-blue-50 to-white p-8'>Body with custom padding - the card body_padding is false, allowing custom spacing</div>
  </div>
  <div class="p-6 border-t border-info-200">
    Normal Footer (with padding)
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
render BetterUi::CardComponent.new(
  variant: :info,
  header_padding: true,
  body_padding: false,
  footer_padding: true
) do |card|
  card.with_header { "Normal Header (with padding)" }
  card.with_body do
    "<div class='bg-gradient-to-b from-blue-50 to-white p-8'>Body with custom padding - the card body_padding is false, allowing custom spacing</div>".html_safe
  end
  card.with_footer { "Normal Footer (with padding)" }
end

No notes provided.

No params configured.