Card - Rails UI Components

Basic Card

This is the body of the card. You can put any content here.

<%= render Ui::Card::Component.new do |component| %>
  <% component.with_header align: :left, title: "Card Title", subtitle: "Card Subtitle" %>
  <% component.with_body do %>
    <p>This is the body content of the card.</p>
  <% end %>
  <% component.with_footer(align: :left) do %>
    <%= render Ui::Btn::Component.new(variant: :primary).with_content("Action") %>
  <% end %>
<% end %>

Bordered Card

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

<%= render Ui::Card::Component.new(bordered: true) do |component| %>
  <% component.with_header align: :center, title: "Centered Title" %>
  <% component.with_body do %>
    <p>Card content goes here...</p>
  <% end %>
  <% component.with_footer(align: :right) do %>
    <%= render Ui::Btn::Component.new(variant: :secondary).with_content("Action") %>
  <% end %>
<% end %>

Body Only Card

Welcome!

Thank you for joining our community. Get started by exploring the features.

<%= render Ui::Card::Component.new do |component| %>
  <% component.with_body do %>
    <div class="text-center">
      <h3>Welcome!</h3>
      <p>Card content without header or footer.</p>
    </div>
  <% end %>
<% end %>