Figures

Here are some examples showcasing figures.

Basic Figure

Figures are used to display images with optional captions. They are commonly used within cards and other content containers.

Preview

Code

= daisy_figure(css: "max-w-96", src: image_path("landscapes/beach.jpg"))

Figure with Caption

You can add a caption to your figure by providing content to the component.

Preview

Code

= daisy_figure(css: "max-w-96", src: image_path("landscapes/mountain-river.jpg")) do
  %p.text-center.italic A beautiful mountain river landscape

Custom Content

Figures can also be used without an image to display custom content.

Preview

Custom content without an image

Code

= daisy_figure(css: "max-w-96 bg-base-100 p-4 rounded-lg") do
  .flex.flex-col.items-center.gap-4
    = hero_icon("photo", css: "size-16 text-base-content/50")
    %p.text-center.italic Custom content without an image

Made with by Profoundry .