Figures

API Docs

Image containers with optional captions for visual content presentation. Perfect for displaying photos, illustrations, or graphics with descriptive text in articles, galleries, and documentation.

Basic Figure

Figures are used to display images with optional captions. They are commonly used within cards and other content containers. By default, images appear above the content.

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. The image appears above the caption by default (position: :top).

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

Figure with Bottom Position

Use position: :bottom to display the caption above the image. This is useful when you want the text to appear first in the reading flow.

Preview

Code

= daisy_figure(css: "max-w-96", src: image_path("landscapes/forest.jpg"), position: :bottom) do
  %p.text-center.italic A serene forest pathway

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 border border-base-300 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 .

Figures

Basic Figure

Figure with Caption

Figure with Bottom Position

Custom Content

Docs

Guides

Hero

Daisy