Card

Content containers with headers and actions

Preview

Card Title

Card content goes here

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.CardComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :title, fn -> "Card Title" end)
    assigns = assign_new(assigns, :content, fn -> "Card content goes here" end)
    assigns = assign_new(assigns, :image, fn -> nil end)

    ~H"""
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
      <%= if @image do %>
        <div class="aspect-w-16 aspect-h-9">
          <img src={@image} alt="Card image" class="w-full h-48 object-cover" />
        </div>
      <% end %>
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-2"><%= @title %></h3>
        <p class="text-gray-600"><%= @content %></p>
        <div class="mt-4 flex space-x-2">
          <button class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
            Action
          </button>
          <button class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500">
            Secondary
          </button>
        </div>
      </div>
    </div>
    """
  end
end