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-primary-50 border border-primary-200 text-primary-900 shadow-sm" >
  <div class="border-b border-primary-200">
    <div class='bg-blue-100 p-4 font-bold'>Custom Padded Header</div>
  </div>
  <div class="">
    <div class='bg-white p-8'>Content with custom padding</div>
  </div>
  <div class="border-t border-primary-200">
    <div class='bg-gray-100 p-4'>Custom Padded Footer</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render BetterUi::CardComponent.new(
  header_padding: false,
  body_padding: false,
  footer_padding: false
) do |card|
  card.with_header do
    "<div class='bg-blue-100 p-4 font-bold'>Custom Padded Header</div>".html_safe
  end
  card.with_body do
    "<div class='bg-white p-8'>Content with custom padding</div>".html_safe
  end
  card.with_footer do
    "<div class='bg-gray-100 p-4'>Custom Padded Footer</div>".html_safe
  end
end

No notes provided.

No params configured.