BetterUi Components

Previews

No matching results.

x
1
2
3
4
5
6
7
8
<div class="flex flex-col rounded-lg text-base bg-primary-50 border border-primary-200 text-primary-900 shadow-sm" >
  <div class="p-6 border-b border-primary-200">
    Playground Card Header
  </div>
  <div class="p-6">
    This is an interactive card playground. Adjust the parameters to see how the card changes.
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
render BetterUi::CardComponent.new(
  variant: variant.to_sym,
  style: style.to_sym,
  size: size.to_sym,
  shadow: shadow,
  header_padding: header_padding,
  body_padding: body_padding,
  footer_padding: footer_padding
) do |card|
  if with_header
    card.with_header { "Playground Card Header" }
  end
  card.with_body { "This is an interactive card playground. Adjust the parameters to see how the card changes." }
  if with_footer
    card.with_footer { "Card Footer" }
  end
end

No notes provided.

Param Description Input

—

—

—

—

—

—

—

—

—