Card Edit

Displays a card with header, content, and footer.


The Most Basic of Cards

Did you know?

This is kinda cool.

You can embed any HTML in the body with a block.
Have a great day!


  rails generate shadcn-ui card


<%= render_card(title: nil, subtitle: nil, body: nil, footer: nil) do %>
  <!-- Optional Body Block -->
<% end %>

The Card component introduces:

  • app/helpers/components/card_helper.rb
  • app/views/components/ui/_card.html.erb

The method render_card defined in app/helpers/components/card_helper.rb accepts optional keyword arguments for each section of content in the card, offering maximum flexibility.

The sections are.

  • title:, for the header of the card, will be rendered in a large bold font.
  • subtitle: for a muted title under the main title..
  • A body: The main content section. Without providing either a keyword argument or a block, an empty card will be rendered.

Note: Padding to the body is applied logically leaving you to define it when a block is passed with the presence of a title, otherwise, a default padding is provided to simplify the markup. Feel free to edit this in app/views/components/ui/_card.html.erb,

Card with Form


Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago