BetterUi Demo

Slots

Cards support header, body, and footer slots for structured content

Card Title

With header, body, and footer

This card uses all three slots: header, body, and footer. Each slot is visually separated by dividers.

Body Only

This card uses only the body slot, which is useful for simple content cards without headers or footers.

Header + Body

This card uses header and body slots without a footer.

This card uses body and footer slots without a header.

Footer content here

bui_card(variant: :primary, style: :bordered) do |card|
  card.with_header { "Card Title" }
  card.with_body { "Main content goes here" }
  card.with_footer { "Footer actions" }
end

Variants

Nine semantic color variants for different contexts

primary

This is a primary variant card with the solid style.

secondary

This is a secondary variant card with the solid style.

accent

This is a accent variant card with the solid style.

success

This is a success variant card with the solid style.

danger

This is a danger variant card with the solid style.

info

This is a info variant card with the solid style.

warning

This is a warning variant card with the solid style.

light

This is a light variant card with the solid style.

dark

This is a dark variant card with the solid style.

bui_card(variant: :primary, style: :solid) do |card|
  card.with_header { "Primary" }
  card.with_body { "Card content" }
end

bui_card(variant: :success, style: :solid) do |card|
  card.with_header { "Success" }
  card.with_body { "Card content" }
end

Styles

Five visual styles: solid, outline, ghost, soft, and bordered

solid

The solid style uses a filled colored background with subtle border.

outline

The outline style uses a white background with a thick colored border.

ghost

The ghost style uses a transparent background with colored text.

soft

The soft style uses a light colored background with a subtle border.

bordered

Preferred for sections

The bordered style uses a white background with a variant-colored border. Great for demo sections.

bui_card(variant: :primary, style: :solid)    { ... }
bui_card(variant: :primary, style: :outline)  { ... }
bui_card(variant: :primary, style: :ghost)    { ... }
bui_card(variant: :primary, style: :soft)     { ... }
bui_card(variant: :primary, style: :bordered) { ... }

Sizes

Five sizes with different padding levels: xs, sm, md, lg, xl

Size: xs

This card uses the xs size. Notice how the padding changes with each size.

Size: sm

This card uses the sm size. Notice how the padding changes with each size.

Size: md

This card uses the md size. Notice how the padding changes with each size.

Size: lg

This card uses the lg size. Notice how the padding changes with each size.

Size: xl

This card uses the xl size. Notice how the padding changes with each size.

bui_card(size: :xs) { ... }  # Compact padding (p-3)
bui_card(size: :sm) { ... }  # Small padding (p-4)
bui_card(size: :md) { ... }  # Default padding (p-6)
bui_card(size: :lg) { ... }  # Large padding (p-8)
bui_card(size: :xl) { ... }  # Extra-large padding (p-10)

Shadow

Control the shadow depth: none, sm, md, lg, xl

shadow: :none

No shadow

shadow: :sm

sm shadow

shadow: :md

md shadow

shadow: :lg

lg shadow

shadow: :xl

xl shadow

bui_card(shadow: :none) { ... }  # No shadow
bui_card(shadow: :sm)   { ... }  # Default - subtle shadow
bui_card(shadow: :md)   { ... }  # Medium shadow
bui_card(shadow: :lg)   { ... }  # Large shadow
bui_card(shadow: :xl)   { ... }  # Extra-large shadow

Padding Control

Selectively disable padding on header, body, or footer

header_padding: false

Custom padding applied via inner element

The header has no default padding, allowing full-bleed header content.

body_padding: false

Name	Role
Alice	Developer
Bob	Designer

Full-bleed image area

Full-bleed body with regular footer padding

footer_padding: false

The footer has no default padding.

Custom full-bleed footer content

# Remove header padding (e.g., for full-bleed header backgrounds)
bui_card(header_padding: false) do |card|
  card.with_header { content_tag(:div, "Full-bleed header", class: "bg-accent-100 p-4") }
  card.with_body { "Normal body" }
end

# Remove body padding (e.g., for tables or images)
bui_card(body_padding: false) do |card|
  card.with_header { "Title" }
  card.with_body { image_tag("photo.jpg", class: "w-full") }
end