Card
Content containers with headers and actions
Preview
Card Title
Card content goes here
Props Editor
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