Card - Rails UI Components

Card Title Card subtitle

This is the body content of the card.

Usage

<%= ui.card do %>
  <%= ui.card_body do %>
    Simple card content
  <% end %>
<% end %>

<%= ui.card do %>
  <%= ui.card_header do %>
    <%= ui.card_title "Title" %>
  <% end %>
  <%= ui.card_body do %>
    Card with header and body
  <% end %>
<% end %>

SubcomponentsUse subcomponents below or any HTML.

Name	Helper	Description
`card_header`	`ui.card_header`	Header section of the card with flexible layout options.
`card_title`	`ui.card_title`	Styled title element for the card header.
`card_subtitle`	`ui.card_subtitle`	Secondary text with muted styling for the card header.
`card_body`	`ui.card_body`	Main content area of the card.
`card_footer`	`ui.card_footer`	Footer section of the card with flexible layout options.

Examples

Basic Card

Card Title Card Subtitle

This is the body content of the card.

<%= ui.card do %>
  <%= ui.card_header do %>
    <%= ui.card_title "Card Title" %>
    <%= ui.card_subtitle "Card Subtitle" %>
  <% end %>
  <%= ui.card_body do %>
    <p>This is the body content of the card.</p>
  <% end %>
  <%= ui.card_footer do %>
    <%= ui.btn "Action" %>
  <% end %>
<% end %>

Card without borders

Centered Title

Card content goes here...

<%= ui.card do %>
  <%= ui.card_header align: :center, bordered: false do %>
    <%= ui.card_title "Centered Title" %>
  <% end %>
  <%= ui.card_body do %>
    <p>Card content goes here...</p>
  <% end %>
  <%= ui.card_footer justify: :end, bordered: false do %>
    <%= ui.btn "Action", variant: :secondary %>
  <% end %>
<% end %>

Header with Row Direction

Title

Card content goes here...

<%= ui.card do %>
  <%= ui.card_header direction: :row, justify: :between do %>
    <%= ui.card_title "Title" %>
    <%= ui.btn "Action", size: :sm %>
  <% end %>
  <%= ui.card_body do %>
    <p>Card content goes here...</p>
  <% end %>
<% end %>

Body Only Card

Welcome!

Thank you for joining our community.

<%= ui.card do %>
  <%= ui.card_body class: "flex flex-col gap-3 text-center" do %>
    <%= ui.icon "information-circle", class: "mx-auto text-primary size-12" %>
    <h3 class="text-lg font-semibold">Welcome!</h3>
    <p class="text-muted-foreground">Thank you for joining our community.</p>
    <%= ui.btn "Get Started", block: true, size: :lg %>
  <% end %>
<% end %>