GitHub

Figures

API Docs

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

A beautiful mountain river landscape

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 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 .
Copyright © 2023-2025 Profoundry LLC.
All rights reserved.
to select
to navigate
esc to close