logo

TextualContentCard

InfoGeneratePackages

The provided code defines a Ruby class named `CardWithNoImageComponent`, which inherits from `ApplicationComponent`. Its main purpose is to generate the template for a card-like component for a website or web application. This component is designed without an image section, focusing on textual content and an action button.

Functionally, the `template` method within the class utilizes a domain-specific language (DSL) to structure the HTML output for the card. The card is styled with predefined classes such as `w-96`, `bg-base-100`, and `shadow-xl` to control its width, background color, and shadow effect, respectively. Inside the card, there is a `card-body` that contains a title ("Card title!"), a paragraph with a sample text, and a `card-actions` section aligned to the end, housing a primary-styled button labeled "Buy Now".

Noteworthy details include the use of Ruby blocks to dynamically construct the HTML content and the focus on a minimalistic design approach by omitting an image. This component can be reused across different parts of a web application to display information and provide a call to action, like purchasing, signifying its modular and flexible design.

# frozen_string_literal: true

class CardWithNoImageComponent < ApplicationComponent
  def template
    div(class: "card w-96 bg-base-100 shadow-xl") do
      div(class: "card-body") do
        h2(class: "card-title") { "Card title!" }
        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

Children