Card

<%= rui_card do |c| %>
  <% c.with_icon(name: "clock") %>
  <% c.with_header(title: "Timed Online") %>
  <% c.with_body do %>
    A flexible online sale format that allows buyers more time to review and bid.
  <% end %>
<% end %>

<% c.with_icon(name: "clock") %>
<% c.with_icon(name: "headphones", color: :warning, placement: :inline) %>
<% c.with_icon do %>
  <span class="text-2xl font-bold">42</span>
<% end %>

<% c.with_header(title: "Timed Online") %>
<% c.with_header(title: "Support", subtitle: "Dedicated support from listing to final result.") %>
<% c.with_header(title: "Section", as: :h2) %>

<% c.with_body(text: "A flexible online sale format.") %>
<% c.with_body do %>
  A flexible online sale format that allows buyers more time to review and bid.
<% end %>

<% c.with_list do |l| %>
  <% l.with_item(text: "Keeps buyers active with outbid alerts") %>
  <% l.with_item(text: "Set and forget max bid functionality") %>
  <% l.with_item(text: "Custom icon per item", icon: "star", color: :warning) %>
<% end %>

<% c.with_media(src: "/sales/olive-grove.jpg", alt: "Olive Grove yards", aspect: :video) %>

<% c.with_footer(text: "Enquire now", href: "/enquire", arrow: :right) %>
<% c.with_footer(text: "Back", href: "/back", arrow: :left) %>
<% c.with_footer(text: "Learn more") %>              
<% c.with_footer do %>
  <%= rui_button("Enquire now", href: "/enquire", size: :sm) %>
<% end %>

<%= rui_card do |c| %>
  <% c.with_header(title: "Selling fees") %>
  <% c.with_list(variant: :pill, leader: true) do |l| %>
    <% l.with_item(text: "1 to 250", icon: false, trailing: "$7.80") %>
    <% l.with_item(text: "251 to 1,000", icon: false, trailing: "$6.20") %>
    <% l.with_item(text: "1,001+", icon: false, trailing: "$4.90") %>
  <% end %>
<% end %>

<%= rui_card(content_class: "p-5 gap-3", divider_class: "border-sky-200") do |c| %>
  <% c.with_header(title: "Agents") %>
  <% c.with_body(text: "A streamlined solution that supports relationships.") %>
  <% c.with_list do |l| %>
    <% l.with_item(text: "Efficient listing tools", icon: "clipboard-list") %>
  <% end %>
<% end %>

<%= rui_card(padding: :lg) do |c| %>
  <% c.with_body { "A flexible online sale format." } %>
  <% c.with_footer(wrapper_class: "bg-transparent dark:bg-transparent border-t-0 pt-2 pb-0") do %>
    <%= rui_link("Download", "/x", variant: :solid, size: :sm) %>
  <% end %>
<% end %>

<%# class: targets the inner link/span instead of the wrapper %>
<% c.with_footer(text: "Enquire now", href: "/enquire", class: "text-emerald-600 dark:text-emerald-400") %>

rui_card(
  variant: :elevated,   # :elevated | :outline | :flat | :soft
  shape: :rounded,      # :rounded | :square | :pill
  padding: :md,         # :none | :sm | :md | :lg
  color: :primary,      # semantic color for icon / soft / footer / list
  href: nil,            # whole-card link mode
  divider: true,        # divider above list slot
  class: nil
) do |c|
  # ...slots
end

<%= rui_card(href: "/lots/482") do |c| %>
  <% c.with_header(title: "Lot 482 — Angus Steers") %>
  <% c.with_body(text: "45 head, 380-420kg, Wagga Wagga NSW.") %>
  <% c.with_footer(text: "View lot", href: "/lots/482") %>
<% end %>

<%= rui_card(title: "Advertise with Us", description: "Reach the people driving Australian agriculture", icon: "megaphone") %>

<%= rui_card do |c| %>
  <% c.with_icon(name: "megaphone") %>
  <% c.with_header(title: "Advertise with Us") %>
  <% c.with_body(text: "Reach the people driving Australian agriculture") %>
<% end %>