Card

Cards are containers for grouping related content and actions.

Basic Card

A simple card with content.

Card Title

This is some card content that explains something interesting.

<%= render Rvk::CardComponent.new do %>
  <h3 class="text-lg font-semibold">Card Title</h3>
  <p class="text-surface-600 mt-2">Card content here.</p>
<% end %>

With Header and Footer

Use slots for structured cards.

Card Header

Card body content goes here. This is where the main content of your card lives.

<%= render Rvk::CardComponent.new do |card| %>
  <% card.with_header do %>
    <h3 class="text-lg font-semibold">Card Header</h3>
  <% end %>

  <p>Card body content goes here.</p>

  <% card.with_footer do %>
    <%= render Rvk::ButtonComponent.new(size: :sm).with_content("Action") %>
  <% end %>
<% end %>

Shadow Variants

Control the card shadow depth.

No Shadow

shadow: :none

Small Shadow

shadow: :sm

Medium Shadow

shadow: :md

Large Shadow

shadow: :lg

<%= render Rvk::CardComponent.new(shadow: :none) { "No Shadow" } %>
<%= render Rvk::CardComponent.new(shadow: :sm) { "Small Shadow" } %>
<%= render Rvk::CardComponent.new(shadow: :md) { "Medium Shadow" } %>
<%= render Rvk::CardComponent.new(shadow: :lg) { "Large Shadow" } %>

Without Padding

Use padding: false for edge-to-edge content like tables or images.

Recent Users

Name	Email
John Doe	john@example.com
Jane Smith	jane@example.com

<%= render Rvk::CardComponent.new(padding: false) do |card| %>
  <% card.with_header do %>
    <h3 class="text-lg font-semibold">Recent Users</h3>
  <% end %>

  <%= render Rvk::TableComponent.new do |table| %>
    ...
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
shadow	Symbol	:sm	Shadow depth: :none, :sm, :md, :lg
padding	Boolean	true	Add padding to card body