Cards

Here are some examples showcasing cards.

Basic Card

Cards are used to display information in a structured way. They can contain images, text, and actions.

Such a beautiful beach!

= daisy_card(css: "max-w-96 bg-base-100 shadow-xl") do |card|
  - card.with_top_figure css: "aspect-video", src: image_path("landscapes/beach.jpg")

  %p Such a beautiful beach!

  - card.with_actions(css: "mt-2 justify-end") do
    = daisy_button(css: "btn-primary") do
      Book Travel

Card Figures

The images (figures) can be on the top or the bottom!

Preview

Beach

Such a beautiful place!

Forest

Such a beautiful place!

Mountain River

Such a beautiful place!

Desert

Such a beautiful place!

Code

- pics = ["beach", "forest", "mountain-river", "desert"]

.mt-8.grid.grid-cols-1.gap-4.lg:grid-cols-2.xl:grid-cols-4
  - pics.each.with_index do |pic, i|
    = daisy_card(title: pic.titleize, css: "max-w-96 bg-base-100 shadow-xl") do |card|
      - if i % 2 == 0
        - card.with_top_figure css: "aspect-video", src: image_path("landscapes/#{pic}.jpg")
      - else
        - card.with_bottom_figure css: "aspect-video", src: image_path("landscapes/#{pic}.jpg")

      %p Such a beautiful place!

      - card.with_actions(css: "mt-2 justify-end") do
        = daisy_button(css: "btn-primary") do
          Book Travel

Made with by Profoundry .