Card Shared Partial

1. Copy shared partial files

Download all 1 shared partial files as a ZIP file.

After downloading, unzip and copy the card/ folder to your app/views/shared/components/ directory.

Copy these files to your app/views/shared/components/card/ directory:

Include :dark classes

<%#
  Card Component
  Content containers with optional headers, bodies, footers, and images.

  Required locals:
    None - all options have defaults

  Optional locals:
    - variant: String (default: "default") - Style: "default", "elevated", "well"
    - padding: String (default: "md") - Padding: "none", "sm", "md", "lg"
    - shadow: String (default: "xs") - Shadow: "none", "xs", "sm", "md", "lg", "xl"
    - rounded: String (default: "xl") - Radius: "none", "sm", "md", "lg", "xl", "full"
    - border: Boolean (default: true) - Show border
    - hoverable: Boolean (default: false) - Add hover shadow effect
    - clickable: Boolean (default: false) - Make card appear clickable
    - divide: Boolean (default: false) - Add dividers between sections
    - full_width_mobile: Boolean (default: false) - Edge-to-edge on mobile
    - classes: String (default: nil) - Additional CSS classes

    Content sections (use capture or pass strings):
    - header_content: String/HTML - Header section content
    - body_content: String/HTML - Body section content (or use block)
    - footer_content: String/HTML - Footer section content

    Image options:
    - image_src: String - Image URL
    - image_alt: String (default: "") - Image alt text
    - image_position: String (default: "top") - "top" or "bottom"
    - image_aspect: String (default: nil) - "square", "video", "wide", or nil for auto
    - image_classes: String - Additional image wrapper classes
%>

<% variant ||= "default" %>
<% padding ||= "md" %>
<% shadow ||= "xs" %>
<% rounded ||= "xl" %>
<% border = true if local_assigns[:border].nil? %>
<% hoverable ||= false %>
<% clickable ||= false %>
<% divide ||= false %>
<% full_width_mobile ||= false %>
<% classes ||= nil %>

<% header_content ||= nil %>
<% body_content ||= nil %>
<% footer_content ||= nil %>

<% image_src ||= nil %>
<% image_alt ||= "" %>
<% image_position ||= "top" %>
<% image_aspect ||= nil %>
<% image_classes ||= nil %>

<%
  # Build variant classes
  variant_classes = case variant
  when :well then "bg-neutral-50 dark:bg-neutral-900/50"
  else # :default (elevated)
    "bg-white dark:bg-neutral-800"
  end

  # Build shadow classes
  shadow_classes = if variant.to_s == "well"
    ""
  else
    case shadow.to_s
    when "none" then ""
    when "sm" then "shadow-sm"
    when "md" then "shadow-md"
    when "lg" then "shadow-lg"
    when "xl" then "shadow-xl"
    else "shadow-xs" # :xs
    end
  end

  # Build rounded classes
  rounded_classes = if full_width_mobile
    case rounded.to_s
    when "none" then ""
    when "sm" then "sm:rounded-sm"
    when "md" then "sm:rounded-md"
    when "lg" then "sm:rounded-lg"
    when "full" then "sm:rounded-full"
    else "sm:rounded-xl" # :xl
    end
  else
    case rounded.to_s
    when "none" then ""
    when "sm" then "rounded-sm"
    when "md" then "rounded-md"
    when "lg" then "rounded-lg"
    when "full" then "rounded-full"
    else "rounded-xl" # :xl
    end
  end

  # Build border classes
  border_classes = if border
    if full_width_mobile
      "border-y sm:border border-black/10 dark:border-white/10"
    else
      "border border-black/10 dark:border-white/10"
    end
  else
    ""
  end

  # Build hover classes
  hover_classes = if hoverable || clickable
    hover_parts = ["transition-all duration-200"]
    hover_parts << "hover:shadow-md dark:hover:shadow-neutral-900/50" if hoverable
    hover_parts << "cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-700/50" if clickable
    hover_parts.join(" ")
  else
    ""
  end

  # Build divide classes
  divide_classes = divide ? "divide-y divide-black/10 dark:divide-white/10" : ""

  # Build wrapper classes
  wrapper_classes = ["overflow-hidden", variant_classes, shadow_classes, rounded_classes, border_classes, hover_classes, divide_classes, classes].compact.reject(&:empty?).join(" ")

  # Padding classes
  header_padding = case padding.to_s
    when "none" then ""
    when "sm" then "px-3 py-3 sm:px-4"
    when "md" then "px-4 py-5 sm:px-6"
    when "lg" then "px-6 py-6 sm:px-8"
    else "px-4 py-5 sm:px-6"
    end

  body_padding = case padding.to_s
    when "none" then ""
    when "sm" then "px-3 py-3 sm:p-4"
    when "md" then "px-4 py-5 sm:p-6"
    when "lg" then "px-6 py-6 sm:p-8"
    else "px-4 py-5 sm:p-6"
    end

  footer_padding = case padding.to_s
    when "none" then ""
    when "sm" then "px-3 py-3 sm:px-4"
    when "md" then "px-4 py-4 sm:px-6"
    when "lg" then "px-6 py-5 sm:px-8"
    else "px-4 py-4 sm:px-6"
    end

  # Header background (only when divide is true)
  header_bg = divide ? "bg-neutral-50 dark:bg-neutral-900/50 border-b border-black/10 dark:border-white/10" : ""

  # Footer background
  footer_bg = "bg-neutral-50 dark:bg-neutral-900/50"

  # Image aspect classes
  image_aspect_classes = case image_aspect.to_s
    when "square" then "aspect-square"
    when "video" then "aspect-video"
    when "wide" then "aspect-[21/9]"
    else ""
    end

  image_wrapper_classes = [image_aspect_classes, "bg-neutral-200 dark:bg-neutral-700", image_classes].compact.reject(&:empty?).join(" ")

  # Determine if we have content
  has_header = header_content.present?
  has_footer = footer_content.present?
  has_image = image_src.present?
  has_body = body_content.present? || block_given?
%>

<div class="<%= wrapper_classes %>">
  <% if has_image && image_position.to_s == "top" %>
    <div class="<%= image_wrapper_classes %>">
      <%= image_tag(image_src, alt: image_alt, class: "w-full h-full object-center object-cover") %>
    </div>
  <% end %>

  <% if has_header %>
    <div class="<%= [header_padding, header_bg].compact.reject(&:empty?).join(' ') %>">
      <%= header_content.html_safe %>
    </div>
  <% end %>

  <% if has_body %>
    <div class="<%= body_padding %>">
      <% if body_content.present? %>
        <%= body_content.html_safe %>
      <% else %>
        <%= yield %>
      <% end %>
    </div>
  <% end %>

  <% if has_footer %>
    <div class="<%= [footer_padding, footer_bg].compact.reject(&:empty?).join(' ') %>">
      <%= footer_content.html_safe %>
    </div>
  <% end %>

  <% if has_image && image_position.to_s == "bottom" %>
    <div class="<%= image_wrapper_classes %>">
      <%= image_tag(image_src, alt: image_alt, class: "w-full h-full object-center object-cover") %>
    </div>
  <% end %>
</div>

2. Usage example

Include :dark classes

<!-- Basic card with body content -->
<%= render "shared/components/card/card" do %>
  <p class="text-neutral-700 dark:text-neutral-300">
    This is a basic card with just body content.
  </p>
<% end %>

<!-- Card with title and description -->
<%= render "shared/components/card/card" do %>
  <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">Card Title</h3>
  <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
    This is a basic card component with a title and description.
  </p>
<% end %>

<!-- Card with header -->
<% card_with_header_content = capture do %>
  <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">Card with Header</h3>
  <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">Header with description</p>
<% end %>
<%= render "shared/components/card/card",
  divide: true,
  header_content: card_with_header_content do %>
  <p class="text-neutral-700 dark:text-neutral-300">
    The header section provides a clear title for the card content.
  </p>
<% end %>

<!-- Card with footer -->
<% card_with_footer_content = capture do %>
  <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
    View details ->
  </a>
<% end %>
<%= render "shared/components/card/card",
  footer_content: card_with_footer_content do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Card with Footer</h3>
  <p class="text-neutral-700 dark:text-neutral-300">This card has a footer for actions.</p>
<% end %>

<!-- Card with header and footer -->
<% complete_card_header_content = capture do %>
  <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">Complete Card</h3>
  <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">Header, body, and footer sections</p>
<% end %>
<% complete_card_footer_content = capture do %>
  <div class="flex justify-between">
    <button type="button" class="text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-500">
      Cancel
    </button>
    <button type="button" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
      Save
    </button>
  </div>
<% end %>
<%= render "shared/components/card/card",
  divide: true,
  header_content: complete_card_header_content,
  footer_content: complete_card_footer_content do %>
  <p class="text-neutral-700 dark:text-neutral-300">
    This card demonstrates a complete structure with all three sections.
  </p>
<% end %>

<!-- Well variant (subtle background) -->
<%= render "shared/components/card/card", variant: "well" do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Well Card</h3>
  <p class="text-neutral-700 dark:text-neutral-300">
    A well has a subtle background and no shadow. Perfect for grouping related content.
  </p>
<% end %>

<!-- Elevated card (larger shadow) -->
<%= render "shared/components/card/card",
  variant: "elevated",
  shadow: "lg" do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Elevated Card</h3>
  <p class="text-neutral-700 dark:text-neutral-300">
    This card has a larger shadow for more visual prominence.
  </p>
<% end %>

<!-- Hoverable card -->
<%= render "shared/components/card/card", hoverable: true do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Hoverable Card</h3>
  <p class="text-neutral-700 dark:text-neutral-300">Hover over this card to see the shadow effect.</p>
<% end %>

<!-- Clickable card -->
<%= render "shared/components/card/card", clickable: true do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Clickable Card</h3>
  <p class="text-neutral-700 dark:text-neutral-300">
    This entire card appears clickable with hover effects.
  </p>
<% end %>

<!-- Edge-to-edge on mobile -->
<%= render "shared/components/card/card", full_width_mobile: true do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Mobile Full Width</h3>
  <p class="text-neutral-700 dark:text-neutral-300">
    On mobile, this card extends edge-to-edge. Resize to see the effect.
  </p>
<% end %>

<!-- Card with image (top) -->
<%= render "shared/components/card/card",
  image_src: "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?auto=format&fit=crop&w=800&q=80",
  image_alt: "Featured image",
  image_aspect: "video" do %>
  <h3 class="mb-2 text-xl font-semibold text-neutral-900 dark:text-white">Card with Image</h3>
  <p class="text-sm text-neutral-700 dark:text-neutral-300">
    This card features an image at the top with video aspect ratio.
  </p>
<% end %>

<!-- Card with image and footer -->
<% article_card_footer_content = capture do %>
  <div class="flex items-center">
    <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Author">
    <div class="ml-3">
      <p class="text-sm font-medium text-neutral-900 dark:text-white">John Doe</p>
      <p class="text-xs text-neutral-500 dark:text-neutral-400">September 16, 2025</p>
    </div>
  </div>
<% end %>
<%= render "shared/components/card/card",
  divide: true,
  image_src: "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?auto=format&fit=crop&w=800&q=80",
  image_alt: "Article image",
  image_aspect: "video",
  footer_content: article_card_footer_content do %>
  <div class="mb-2 flex items-center">
    <span class="inline-flex items-center gap-0.5 rounded-md bg-blue-50 px-1.5 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
      Article
    </span>
    <span class="ml-2 text-sm text-neutral-500 dark:text-neutral-400">5 min read</span>
  </div>
  <h3 class="mb-2 text-xl font-semibold text-neutral-900 dark:text-white">Featured Article</h3>
  <p class="text-sm text-neutral-700 dark:text-neutral-300">
    A complete card with image, badges, and footer.
  </p>
<% end %>

<!-- Small padding -->
<%= render "shared/components/card/card", padding: "sm" do %>
  <h3 class="mb-1 text-base font-medium text-neutral-900 dark:text-white">Compact Card</h3>
  <p class="text-sm text-neutral-700 dark:text-neutral-300">Uses small padding for denser layouts.</p>
<% end %>

<!-- Large padding -->
<%= render "shared/components/card/card", padding: "lg" do %>
  <h3 class="mb-2 text-xl font-medium text-neutral-900 dark:text-white">Spacious Card</h3>
  <p class="text-neutral-700 dark:text-neutral-300">Uses large padding for more breathing room.</p>
<% end %>

<!-- No border -->
<%= render "shared/components/card/card",
  border: false,
  shadow: "md" do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Borderless Card</h3>
  <p class="text-neutral-700 dark:text-neutral-300">No border, relying on shadow for definition.</p>
<% end %>

<!-- Custom classes -->
<%= render "shared/components/card/card", classes: "mx-auto max-w-md" do %>
  <h3 class="mb-2 text-lg/6 font-medium text-neutral-900 dark:text-white">Custom Classes</h3>
  <p class="text-neutral-700 dark:text-neutral-300">
    This card has custom width and centering classes.
  </p>
<% end %>

Rendered usage example

This is a basic card with just body content.

Card Title

This is a basic card component with a title and description.

Card with Header

Header with description

The header section provides a clear title for the card content.

Card with Footer

This card has a footer for actions.

View details ->

Complete Card

Header, body, and footer sections

This card demonstrates a complete structure with all three sections.

Well Card

A well has a subtle background and no shadow. Perfect for grouping related content.

Elevated Card

This card has a larger shadow for more visual prominence.

Hoverable Card

Hover over this card to see the shadow effect.

Clickable Card

This entire card appears clickable with hover effects.

Mobile Full Width

On mobile, this card extends edge-to-edge. Resize to see the effect.

Card with Image

This card features an image at the top with video aspect ratio.

Article 5 min read

Featured Article

A complete card with image, badges, and footer.

John Doe

September 16, 2025

Compact Card

Uses small padding for denser layouts.

Spacious Card

Uses large padding for more breathing room.

Borderless Card

No border, relying on shadow for definition.

Custom Classes

This card has custom width and centering classes.

Card ViewComponent

1. Ensure the gem is installed

gem "view_component", "~> 4.2"

2. Copy component files

Download all 2 component files as a ZIP file.

Download all files (ZIP)

After downloading, unzip and copy the card/ folder to your app/components/ directory.

Copy these files to your app/components/card/ directory:

Include :dark classes

<div class="<%= wrapper_classes %>">
  <% if image && image.position == :top %>
    <div class="<%= image.wrapper_classes %>">
      <%= image_tag(image.src, alt: image.alt, class: image.image_classes) %>
    </div>
  <% end %>

  <% if header? %>
    <div class="<%= header_classes %>">
      <%= header %>
    </div>
  <% end %>

  <% if body? %>
    <div class="<%= body_classes %>">
      <%= body %>
    </div>
  <% elsif content? %>
    <div class="<%= body_classes %>">
      <%= content %>
    </div>
  <% end %>

  <% if footer? %>
    <div class="<%= footer_classes %>">
      <%= footer %>
    </div>
  <% end %>

  <% if image && image.position == :bottom %>
    <div class="<%= image.wrapper_classes %>">
      <%= image_tag(image.src, alt: image.alt, class: image.image_classes) %>
    </div>
  <% end %>
</div>

Include :dark classes

# frozen_string_literal: true

module Card
  class Component < ViewComponent::Base
    VARIANTS = %i[default elevated well].freeze
    PADDINGS = %i[none sm md lg].freeze
    SHADOWS = %i[none xs sm md lg xl].freeze
    ROUNDED = %i[none sm md lg xl full].freeze

    renders_one :header
    renders_one :body
    renders_one :footer
    renders_one :image, lambda { |src:, alt: "", position: :top, aspect: nil, classes: nil|
      ImageComponent.new(src: src, alt: alt, position: position, aspect: aspect, classes: classes)
    }

    # @param variant [Symbol] Style variant: :default, :elevated, :well
    # @param padding [Symbol] Content padding: :none, :sm, :md, :lg
    # @param shadow [Symbol] Shadow size: :none, :xs, :sm, :md, :lg, :xl
    # @param rounded [Symbol] Border radius: :none, :sm, :md, :lg, :xl, :full
    # @param border [Boolean] Show border
    # @param hoverable [Boolean] Add hover effects
    # @param clickable [Boolean] Make entire card clickable (adds cursor and hover)
    # @param divide [Boolean] Add dividers between header, body, footer
    # @param full_width_mobile [Boolean] Edge-to-edge on mobile
    # @param classes [String] Additional CSS classes
    def initialize(
      variant: :default,
      padding: :md,
      shadow: :xs,
      rounded: :xl,
      border: true,
      hoverable: false,
      clickable: false,
      divide: false,
      full_width_mobile: false,
      classes: nil
    )
      super()
      @variant = VARIANTS.include?(variant) ? variant : :default
      @padding = PADDINGS.include?(padding) ? padding : :md
      @shadow = SHADOWS.include?(shadow) ? shadow : :xs
      @rounded = ROUNDED.include?(rounded) ? rounded : :xl
      @border = border
      @hoverable = hoverable
      @clickable = clickable
      @divide = divide
      @full_width_mobile = full_width_mobile
      @classes = classes
    end

    def wrapper_classes
      [
        base_classes,
        variant_classes,
        shadow_classes,
        rounded_classes,
        border_classes,
        hover_classes,
        divide_classes,
        @classes
      ].compact.reject(&:empty?).join(" ")
    end

    def header_classes
      [
        header_padding_classes,
        header_background_classes
      ].compact.reject(&:empty?).join(" ")
    end

    def body_classes
      body_padding_classes
    end

    def footer_classes
      [
        footer_padding_classes,
        footer_background_classes
      ].compact.reject(&:empty?).join(" ")
    end

    private

    def base_classes
      "overflow-hidden"
    end

    def variant_classes
      case @variant
      when :well
        "bg-neutral-50 dark:bg-neutral-900/50"
      else # :default (elevated)
        "bg-white dark:bg-neutral-800"
      end
    end

    def shadow_classes
      return "" if @variant == :well

      case @shadow
      when :none then ""
      when :sm then "shadow-sm"
      when :md then "shadow-md"
      when :lg then "shadow-lg"
      when :xl then "shadow-xl"
      else "shadow-xs" # :xs
      end
    end

    def rounded_classes
      if @full_width_mobile
        case @rounded
        when :none then ""
        when :sm then "sm:rounded-sm"
        when :md then "sm:rounded-md"
        when :lg then "sm:rounded-lg"
        when :full then "sm:rounded-full"
        else "sm:rounded-xl" # :xl
        end
      else
        case @rounded
        when :none then ""
        when :sm then "rounded-sm"
        when :md then "rounded-md"
        when :lg then "rounded-lg"
        when :full then "rounded-full"
        else "rounded-xl" # :xl
        end
      end
    end

    def border_classes
      return "" unless @border

      if @full_width_mobile
        "border-y sm:border border-black/10 dark:border-white/10"
      else
        "border border-black/10 dark:border-white/10"
      end
    end

    def hover_classes
      return "" unless @hoverable || @clickable

      classes = []
      classes << "transition-all duration-200"
      classes << "hover:shadow-md dark:hover:shadow-neutral-900/50" if @hoverable
      classes << "cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-700/50" if @clickable
      classes.join(" ")
    end

    def divide_classes
      return "" unless @divide

      "divide-y divide-black/10 dark:divide-white/10"
    end

    def header_padding_classes
      case @padding
      when :none then ""
      when :sm then "px-3 py-3 sm:px-4"
      when :lg then "px-6 py-6 sm:px-8"
      else "px-4 py-5 sm:px-6" # :md
      end
    end

    def header_background_classes
      return "" unless @divide

      "bg-neutral-50 dark:bg-neutral-900/50 border-b border-black/10 dark:border-white/10"
    end

    def body_padding_classes
      case @padding
      when :none then ""
      when :sm then "px-3 py-3 sm:p-4"
      when :lg then "px-6 py-6 sm:p-8"
      else "px-4 py-5 sm:p-6" # :md
      end
    end

    def footer_padding_classes
      case @padding
      when :none then ""
      when :sm then "px-3 py-3 sm:px-4"
      when :lg then "px-6 py-5 sm:px-8"
      else "px-4 py-4 sm:px-6" # :md
      end
    end

    def footer_background_classes
      "bg-neutral-50 dark:bg-neutral-900/50"
    end

    attr_reader :variant, :padding, :shadow, :rounded, :border, :hoverable, :clickable, :divide, :full_width_mobile

    # Nested ImageComponent for card images
    class ImageComponent < ViewComponent::Base
      POSITIONS = %i[top bottom].freeze
      ASPECTS = %i[auto square video wide].freeze
      attr_reader :src, :alt, :position

      def initialize(src:, alt: "", position: :top, aspect: nil, classes: nil)
        super()
        @src = src
        @alt = alt
        @position = POSITIONS.include?(position) ? position : :top
        @aspect = aspect
        @classes = classes
      end

      def wrapper_classes
        [
          aspect_classes,
          "bg-neutral-200 dark:bg-neutral-700",
          @classes
        ].compact.reject(&:empty?).join(" ")
      end

      def image_classes
        "w-full h-full object-center object-cover"
      end

      private

      def aspect_classes
        case @aspect
        when :square then "aspect-square"
        when :video then "aspect-video"
        when :wide then "aspect-[21/9]"
        else "" # auto - no fixed aspect
        end
      end
    end
  end
end

3. Usage example

Include :dark classes

<!-- Basic card with body content -->
<%= render(Card::Component.new) do |card| %>
  <% card.with_body do %>
    <p class="text-neutral-700 dark:text-neutral-300">This is a basic card with just body content.</p>
  <% end %>
<% end %>

<!-- Card with title and description -->
<%= render(Card::Component.new) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">Card Title</h3>
    <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
      This is a basic card component with a title and description.
    </p>
  <% end %>
<% end %>

<!-- Card with header -->
<%= render(Card::Component.new(divide: true)) do |card| %>
  <% card.with_header do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">Card with Header</h3>
    <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">Header with description</p>
  <% end %>
  <% card.with_body do %>
    <p class="text-neutral-700 dark:text-neutral-300">The header section provides a clear title for the card content.</p>
  <% end %>
<% end %>

<!-- Card with footer -->
<%= render(Card::Component.new) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Card with Footer</h3>
    <p class="text-neutral-700 dark:text-neutral-300">This card has a footer for actions.</p>
  <% end %>
  <% card.with_footer do %>
    <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">View details →</a>
  <% end %>
<% end %>

<!-- Card with header and footer -->
<%= render(Card::Component.new(divide: true)) do |card| %>
  <% card.with_header do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">Complete Card</h3>
    <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">Header, body, and footer sections</p>
  <% end %>
  <% card.with_body do %>
    <p class="text-neutral-700 dark:text-neutral-300">This card demonstrates a complete structure with all three sections.</p>
  <% end %>
  <% card.with_footer do %>
    <div class="flex justify-between">
      <button type="button" class="text-sm font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-500">Cancel</button>
      <button type="button" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">Save</button>
    </div>
  <% end %>
<% end %>

<!-- Well variant (subtle background) -->
<%= render(Card::Component.new(variant: :well)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Well Card</h3>
    <p class="text-neutral-700 dark:text-neutral-300">A well has a subtle background and no shadow. Perfect for grouping related content.</p>
  <% end %>
<% end %>

<!-- Elevated card (larger shadow) -->
<%= render(Card::Component.new(variant: :elevated, shadow: :lg)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Elevated Card</h3>
    <p class="text-neutral-700 dark:text-neutral-300">This card has a larger shadow for more visual prominence.</p>
  <% end %>
<% end %>

<!-- Hoverable card -->
<%= render(Card::Component.new(hoverable: true)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Hoverable Card</h3>
    <p class="text-neutral-700 dark:text-neutral-300">Hover over this card to see the shadow effect.</p>
  <% end %>
<% end %>

<!-- Clickable card -->
<%= render(Card::Component.new(clickable: true)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Clickable Card</h3>
    <p class="text-neutral-700 dark:text-neutral-300">This entire card appears clickable with hover effects.</p>
  <% end %>
<% end %>

<!-- Edge-to-edge on mobile -->
<%= render(Card::Component.new(full_width_mobile: true)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Mobile Full Width</h3>
    <p class="text-neutral-700 dark:text-neutral-300">On mobile, this card extends edge-to-edge. Resize to see the effect.</p>
  <% end %>
<% end %>

<!-- Card with image (top) -->
<%= render(Card::Component.new) do |card| %>
  <% card.with_image(
    src: "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?auto=format&fit=crop&w=800&q=80",
    alt: "Featured image",
    aspect: :video
  ) %>
  <% card.with_body do %>
    <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">Card with Image</h3>
    <p class="text-sm text-neutral-700 dark:text-neutral-300">This card features an image at the top with video aspect ratio.</p>
  <% end %>
<% end %>

<!-- Card with image and footer -->
<%= render(Card::Component.new(divide: true)) do |card| %>
  <% card.with_image(
    src: "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?auto=format&fit=crop&w=800&q=80",
    alt: "Article image",
    aspect: :video
  ) %>
  <% card.with_body do %>
    <div class="flex items-center mb-2">
      <span class="inline-flex items-center gap-0.5 rounded-md bg-blue-50 px-1.5 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">Article</span>
      <span class="ml-2 text-sm text-neutral-500 dark:text-neutral-400">5 min read</span>
    </div>
    <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">Featured Article</h3>
    <p class="text-sm text-neutral-700 dark:text-neutral-300">A complete card with image, badges, and footer.</p>
  <% end %>
  <% card.with_footer do %>
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Author">
      <div class="ml-3">
        <p class="text-sm font-medium text-neutral-900 dark:text-white">John Doe</p>
        <p class="text-xs text-neutral-500 dark:text-neutral-400">September 16, 2025</p>
      </div>
    </div>
  <% end %>
<% end %>

<!-- Small padding -->
<%= render(Card::Component.new(padding: :sm)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-base font-medium text-neutral-900 dark:text-white mb-1">Compact Card</h3>
    <p class="text-sm text-neutral-700 dark:text-neutral-300">Uses small padding for denser layouts.</p>
  <% end %>
<% end %>

<!-- Large padding -->
<%= render(Card::Component.new(padding: :lg)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-xl font-medium text-neutral-900 dark:text-white mb-2">Spacious Card</h3>
    <p class="text-neutral-700 dark:text-neutral-300">Uses large padding for more breathing room.</p>
  <% end %>
<% end %>

<!-- No border -->
<%= render(Card::Component.new(border: false, shadow: :md)) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Borderless Card</h3>
    <p class="text-neutral-700 dark:text-neutral-300">No border, relying on shadow for definition.</p>
  <% end %>
<% end %>

<!-- Custom classes -->
<%= render(Card::Component.new(classes: "max-w-md mx-auto")) do |card| %>
  <% card.with_body do %>
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Custom Classes</h3>
    <p class="text-neutral-700 dark:text-neutral-300">This card has custom width and centering classes.</p>
  <% end %>
<% end %>

<!-- Using content block directly (shorthand for body) -->
<%= render(Card::Component.new) do %>
  <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Simple Content</h3>
  <p class="text-neutral-700 dark:text-neutral-300">You can also pass content directly without using with_body.</p>
<% end %>

Rendered usage example

This is a basic card with just body content.

Card Title

This is a basic card component with a title and description.

Card with Header

Header with description

The header section provides a clear title for the card content.

Card with Footer

This card has a footer for actions.

View details →

Complete Card

Header, body, and footer sections

This card demonstrates a complete structure with all three sections.

Well Card

A well has a subtle background and no shadow. Perfect for grouping related content.

Elevated Card

This card has a larger shadow for more visual prominence.

Hoverable Card

Hover over this card to see the shadow effect.

Clickable Card

This entire card appears clickable with hover effects.

Mobile Full Width

On mobile, this card extends edge-to-edge. Resize to see the effect.

Card with Image

This card features an image at the top with video aspect ratio.

Article 5 min read

Featured Article

A complete card with image, badges, and footer.

John Doe

September 16, 2025

Compact Card

Uses small padding for denser layouts.

Spacious Card

Uses large padding for more breathing room.

Borderless Card

No border, relying on shadow for definition.

Custom Classes

This card has custom width and centering classes.

Simple Content

You can also pass content directly without using with_body.

Card Rails Components

A card is a flexible and extensible content container with multiple variants and options.

Examples

Basic Card

A simple card component with shadow and rounded corners, perfect for containing any type of content.

Basic Card

This is a basic card component with a simple shadow and rounded corners. It can contain any content you need.

Include :dark classes

<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
  <div class="px-4 py-5 sm:p-6">
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">Basic Card</h3>
    <div class="mt-2 max-w-xl text-sm text-neutral-600 dark:text-neutral-400">
      <p>This is a basic card component with a simple shadow and rounded corners. It can contain any content you need.</p>
    </div>
    <div class="mt-3">
      <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
        Action Button
      </button>
    </div>
  </div>
</div>

Card with Header

A card with a distinct header section separated by a divider for better content organization.

Card with Header

This card has a header section separated by a divider

The header section helps organize content and provides a clear title for the card. The divider creates visual separation between the header and body content.

Learn more

Include :dark classes

<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden divide-y divide-black/10 dark:divide-white/10">
  <div class="px-4 py-5 sm:px-6">
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">
      Card with Header
    </h3>
    <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
      This card has a header section separated by a divider
    </p>
  </div>
  <div class="px-4 py-5 sm:p-6">
    <p class="text-neutral-700 dark:text-neutral-300">
      The header section helps organize content and provides a clear title for the card. The divider creates visual separation between the header and body content.
    </p>
    <div class="mt-4">
      <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
        Learn more <span aria-hidden="true">→</span>
      </a>
    </div>
  </div>
</div>

Card with Footer

A card with a footer section for actions, links, or additional information.

Card with Footer

This card includes a footer section that can contain actions, links, or additional information. The footer provides a natural place for CTAs or metadata.

View details

Include :dark classes

<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
  <div class="px-4 py-5 sm:p-6">
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Card with Footer</h3>
    <p class="text-neutral-700 dark:text-neutral-300">
      This card includes a footer section that can contain actions, links, or additional information. The footer provides a natural place for CTAs or metadata.
    </p>
  </div>
  <div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-4 sm:px-6 border-t border-black/10 dark:border-white/10">
    <div class="text-sm">
      <a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500">
        View details<span class="sr-only"> about card with footer</span>
      </a>
    </div>
  </div>
</div>

Card with Header and Footer

A complete card structure with header, body, and footer sections.

Complete Card

Header, body, and footer sections

This card demonstrates a complete structure with header, body, and footer sections. Each section serves a specific purpose:

Header: Title and description
Body: Main content area
Footer: Actions and links

Include :dark classes

<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 rounded-xl shadow-xs overflow-hidden">
  <div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-5 sm:px-6 border-b border-black/10 dark:border-white/10">
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white">
      Complete Card
    </h3>
    <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
      Header, body, and footer sections
    </p>
  </div>
  <div class="px-4 py-5 sm:p-6">
    <div class="text-neutral-700 dark:text-neutral-300">
      <p class="mb-4">This card demonstrates a complete structure with header, body, and footer sections. Each section serves a specific purpose:</p>
      <ul class="list-disc list-inside space-y-1 text-sm">
        <li>Header: Title and description</li>
        <li>Body: Main content area</li>
        <li>Footer: Actions and links</li>
      </ul>
    </div>
  </div>
  <div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-4 sm:px-6 border-t border-black/10 dark:border-white/10">
    <div class="flex justify-between">
      <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-black/10 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-neutral-700/50 dark:text-neutral-50 dark:hover:bg-neutral-700/75 dark:focus-visible:outline-neutral-200">
        Cancel
      </button>
      <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
        Save Changes
      </button>
    </div>
  </div>
</div>

Edge-to-Edge on Mobile

A responsive card that extends to full width on mobile devices and returns to standard appearance on larger screens.

Edge-to-Edge on Mobile

This card extends to the full width of the viewport on mobile devices, removing rounded corners and side margins. On larger screens, it returns to the standard card appearance with rounded corners and shadows.

Resize your browser to see the responsive behavior

Include :dark classes

<div class="bg-white dark:bg-neutral-800 border-y sm:border border-black/10 dark:border-white/10 overflow-hidden shadow-xs sm:rounded-xl">
  <div class="px-4 py-5 sm:p-6">
    <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Edge-to-Edge on Mobile</h3>
    <p class="text-neutral-700 dark:text-neutral-300">
      This card extends to the full width of the viewport on mobile devices, removing rounded corners and side margins. On larger screens, it returns to the standard card appearance with rounded corners and shadows.
    </p>
  </div>
  <div class="bg-neutral-50 dark:bg-neutral-900/50 px-4 py-4 sm:px-6 border-t border-black/10 dark:border-white/10">
    <div class="text-sm text-neutral-500 dark:text-neutral-400">
      Resize your browser to see the responsive behavior
    </div>
  </div>
</div>

Well Card

A subtle container with background color and no shadow, ideal for secondary content areas.

Well Card

A well is a simple container with a subtle background color and no shadow. It's perfect for grouping related content without the visual weight of a full card.

Include :dark classes

<div class="bg-neutral-50 dark:bg-neutral-900/50 rounded-xl px-6 py-5 border border-black/10 dark:border-white/10">
  <h3 class="text-lg/6 font-medium text-neutral-900 dark:text-white mb-2">Well Card</h3>
  <p class="text-neutral-700 dark:text-neutral-300">
    A well is a simple container with a subtle background color and no shadow. It's perfect for grouping related content without the visual weight of a full card.
  </p>
</div>

Card with Image

A content card with a featured image, perfect for blog posts, articles, or media-rich content.

Article 5 min read

Card with Featured Image

This card includes a featured image at the top, perfect for blog posts, articles, or any content that benefits from visual representation. The image uses aspect ratio utilities for consistent sizing.

John Doe

September 16, 2025

Include :dark classes

<div class="bg-white dark:bg-neutral-800 rounded-xl shadow-xs overflow-hidden border border-black/10 dark:border-white/10">
  <div class="aspect-w-16 aspect-h-9 bg-neutral-200 dark:bg-neutral-700">
    <img src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="Card image" class="w-full h-full object-center object-cover">
  </div>
  <div class="px-6 py-4">
    <div class="flex items-center mb-2">
      <span class="inline-flex items-center gap-0.5 rounded-md bg-blue-50 px-1.5 py-0.5 text-[11px] font-medium text-blue-700 outline outline-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:outline-blue-400/25">
        Article
      </span>
      <span class="ml-2 text-sm text-neutral-500 dark:text-neutral-400">5 min read</span>
    </div>
    <h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
      Card with Featured Image
    </h3>
    <p class="text-neutral-700 dark:text-neutral-300 text-sm">
      This card includes a featured image at the top, perfect for blog posts, articles, or any content that benefits from visual representation. The image uses aspect ratio utilities for consistent sizing.
    </p>
  </div>
  <div class="px-6 py-4 bg-neutral-50 dark:bg-neutral-900/50 border-t border-black/10 dark:border-white/10">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Author">
        <div class="ml-3">
          <p class="text-sm font-medium text-neutral-900 dark:text-white">John Doe</p>
          <p class="text-xs text-neutral-500 dark:text-neutral-400">September 16, 2025</p>
        </div>
      </div>
      <button type="button" class="text-neutral-400 hover:text-neutral-500">
        <svg class="size-5" fill="currentColor" viewBox="0 0 20 20">
          <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Stats Card

A card designed for displaying statistics, metrics, and progress indicators in dashboards.

Total Revenue

$71,897

12.5% from last month

Progress to goal

72%

Include :dark classes

<div class="bg-white dark:bg-neutral-800 border border-black/10 dark:border-white/10 overflow-hidden rounded-xl shadow-xs">
  <div class="px-4 py-5 sm:p-6">
    <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-400 truncate">
      Total Revenue
    </dt>
    <dd class="mt-1 text-3xl font-semibold text-neutral-900 dark:text-white">
      $71,897
    </dd>
    <div class="mt-4">
      <div class="flex items-baseline">
        <span class="text-sm font-medium text-green-600 dark:text-green-400">
          <svg class="self-center inline-block size-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
          12.5%
        </span>
        <span class="ml-2 text-sm text-neutral-500 dark:text-neutral-400">
          from last month
        </span>
      </div>
      <div class="mt-3">
        <div class="relative pt-1">
          <div class="flex mb-2 items-center justify-between">
            <div>
              <span class="text-xs font-semibold inline-block text-neutral-600 dark:text-neutral-400">
                Progress to goal
              </span>
            </div>
            <div class="text-right">
              <span class="text-xs font-semibold inline-block text-neutral-600 dark:text-neutral-400">
                72%
              </span>
            </div>
          </div>
          <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-neutral-200 dark:bg-neutral-700">
            <div style="width:72%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Buttons

Carousel