logo

Responsive Card Component for New Album Releases

InfoGeneratePackages

This Ruby code defines a class named ResponsiveCardComponent, which inherits from ApplicationComponent. The class is designed to generate a responsive card layout component, typically for a web interface. The card is structured with a combination of HTML and CSS classes that are likely part of a CSS framework, such as Tailwind CSS and possibly DaisyUI for component styling.

The card includes a left-aligned image and card content on the right, suitable for wide screens, thanks to the "lg:card-side" class. The content comprises a title ("New album is released!"), a description ("Click the button to listen on Spotiwhy app."), and a call-to-action button ("Listen"). This layout is expected to accommodate different screen sizes responsively. The use of "bg-base-100", "shadow-xl", and other classes suggest the card's background color, shadow, and additional styling details are controlled via the CSS classes.

Overall, the ResponsiveCardComponent class provides a predefined structure for displaying information in a neatly organized card format on web pages, with a focus on responsive design. It’s particularly suited for showcasing new album releases and encouraging users to listen to them on a specified app.

# frozen_string_literal: true

class ResponsiveCardComponent < ApplicationComponent
  def template
    div(class: "card lg:card-side bg-base-100 shadow-xl") do
      figure { img(src: "https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg", alt: "Album") }
      div(class: "card-body") do
        h2(class: "card-title") { "New album is released!" }
        p { "Click the button to listen on Spotiwhy app." }
        div(class: "card-actions justify-end") do
          button(class: "btn btn-primary") { "Listen" }
        end
      end
    end
  end
end

Children