Card

<%= render "components/card" do %>
  <%= render "components/card/header" do %>
    <%= render "components/card/title", text: "Card Title" %>
    <%= render "components/card/description", text: "Card description." %>
  <% end %>
  <%= render "components/card/content" do %>
    <p>Card content goes here.</p>
  <% end %>
  <%= render "components/card/footer" do %>
    <button data-component="button" data-variant="primary">Save</button>
  <% end %>
<% end %>

<%= render "components/card" do %>
  <%= render "components/card/content", spacing: :full do %>
    <p>A simple card with just content.</p>
  <% end %>
<% end %>

<%= render "components/card" do %>
  <%= render "components/card/header", layout: :row do %>
    <div>
      <%= render "components/card/title", text: "Team Members" %>
      <%= render "components/card/description", text: "Manage your team." %>
    </div>
    <%= render "components/card/action" do %>
      <button data-component="button" data-variant="primary" data-size="sm">Add</button>
    <% end %>
  <% end %>
  <%= render "components/card/content" do %>
    <p class="text-sm text-muted-foreground">No members yet.</p>
  <% end %>
<% end %>

<%= render "components/card" do %>
  <%= render "components/card/header" do %>
    <%= render "components/card/title", text: "Settings" %>
  <% end %>
  <%= render "components/card/content" do %>
    <p>Configure your preferences.</p>
  <% end %>
  <%= render "components/card/footer", align: :end do %>
    <button data-component="button" data-variant="outline">Cancel</button>
    <button data-component="button" data-variant="primary">Save</button>
  <% end %>
<% end %>