# VelvetKit

## Card (`UI::Card`)

A bordered container with header, content and footer.

Add it: `bin/rails generate velvetkit:add card`

### Arguments

```ruby
UI::Card.new(class: nil, **html_attrs)
```

Slots: `with_header`, `with_card_content`, `with_footer`, `with_content`, `with_title`, `with_description`

### Example: Default (content only)

```erb
<div class="max-w-sm">
  <%= render(UI::Card.new) do |card| %>
    <% card.with_content do %>
      <p class="text-sm text-muted-foreground">A simple card with only body content.</p>
    <% end %>
  <% end %>
</div>
```

### Example: With Header

```erb
<div class="max-w-sm">
  <%= render(UI::Card.new) do |card| %>
    <% card.with_header do |header| %>
      <% header.with_title { "Notifications" } %>
      <% header.with_description { "Configure how you receive notifications." } %>
    <% end %>
    <% card.with_content do %>
      <p class="text-sm text-muted-foreground">Card with a header containing a title and description.</p>
    <% end %>
  <% end %>
</div>
```

### Example: With Footer

```erb
<div class="max-w-sm">
  <%= render(UI::Card.new) do |card| %>
    <% card.with_content do %>
      <p class="text-sm text-muted-foreground">Card with body content and a footer containing actions.</p>
    <% end %>
    <% card.with_footer do %>
      <div class="flex gap-2">
        <%= render(UI::Button.new(variant: :primary, size: :sm)) { "Save" } %>
        <%= render(UI::Button.new(variant: :outline, size: :sm)) { "Cancel" } %>
      </div>
    <% end %>
  <% end %>
</div>
```

### Example: Complete (all sections)

```erb
<div class="max-w-sm">
  <%= render(UI::Card.new) do |card| %>
    <% card.with_header do |header| %>
      <% header.with_title { "Team Members" } %>
      <% header.with_description { "Manage your team and permissions." } %>
    <% end %>
    <% card.with_content do %>
      <div class="space-y-3">
        <div class="flex items-center gap-3">
          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">JD</div>
          <div>
            <p class="text-sm font-medium">John Doe</p>
            <p class="text-xs text-muted-foreground">Admin</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium text-primary">AS</div>
          <div>
            <p class="text-sm font-medium">Alice Smith</p>
            <p class="text-xs text-muted-foreground">Editor</p>
          </div>
        </div>
      </div>
    <% end %>
    <% card.with_footer do %>
      <div class="flex gap-2 w-full">
        <%= render(UI::Button.new(variant: :outline, size: :sm, class: "w-full")) { "Invite Member" } %>
      </div>
    <% end %>
  <% end %>
</div>
```

### Example: Settings Form

```erb
<div class="max-w-sm">
  <%= render(UI::Card.new) do |card| %>
    <% card.with_header do |header| %>
      <% header.with_title { "Account Settings" } %>
      <% header.with_description { "Update your account preferences." } %>
    <% end %>
    <% card.with_content do %>
      <div class="space-y-4">
        <div class="space-y-2">
          <%= render(UI::Label.new(for: "name")) { "Display Name" } %>
          <%= render(UI::Input.new(id: "name", placeholder: "Enter your name")) %>
        </div>
        <div class="space-y-2">
          <%= render(UI::Label.new(for: "username")) { "Username" } %>
          <%= render(UI::Input.new(id: "username", placeholder: "@username")) %>
        </div>
      </div>
    <% end %>
    <% card.with_footer do %>
      <div class="flex gap-2">
        <%= render(UI::Button.new(variant: :primary, size: :sm)) { "Save Changes" } %>
      </div>
    <% end %>
  <% end %>
</div>
```