logo

CardWithImageOverlay

InfoGeneratePackages

The code defines a Ruby class named CardWithImageOverlayComponent that inherits from ApplicationComponent. This class is designed to render a card-like component structure with HTML and CSS styling. The component features a full-image overlay at the top (using an image from DaisyUI's stock photos), followed by a card body containing a title (\

# frozen_string_literal: true

class CardWithImageOverlayComponent < ApplicationComponent
  def template
    div(class: "card w-96 bg-base-100 shadow-xl image-full") do
      figure { img(src: "https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg", alt: "Shoes") }
      div(class: "card-body") do
        h2(class: "card-title") { "Shoes!" }
        p { "If a dog chews shoes whose shoes does he choose?" }
        div(class: "card-actions justify-end") do
          button(class: "btn btn-primary") { "Buy Now" }
        end
      end
    end
  end
end