Figure

An image element with optional caption and aspect ratio control.

Examples

Basic Figure

Standard image with a caption.

blade

<x-plume::figure src="https://images.unsplash.com/photo-1550547660-d9450f859349?w=800&q=80"
    alt="A burger" caption="Delicious burger with fries." aspect="video" class="max-w-md" />

Responsive Image

Using srcset and sizes for optimized delivery.

blade

<x-plume::figure src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=800&q=80"
    srcset="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=400&q=80 400w, https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=800&q=80 800w"
    sizes="(max-width: 600px) 400px, 800px" alt="Pizza" caption="Wood fired pizza." aspect="video"
    class="max-w-md" />

Modern Formats

Leveraging the sources slot for AVIF/WebP support with fallback.

blade

<x-plume::figure src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=800&q=80"
    alt="Dessert" aspect="video" class="max-w-md">
    <x-slot:sources>
        <source
            srcset="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=800&q=80&fm=avif"
            type="image/avif">
        <source
            srcset="https://images.unsplash.com/photo-1565958011703-44f9829ba187?w=800&q=80&fm=webp"
            type="image/webp">
    </x-slot:sources>
    <span class="font-bold text-sm text-foreground/80 dark:text-background-200">Sweet treat:</span>
    <span class="text-sm text-foreground/80 dark:text-background-200">Strawberry cake.</span>
</x-plume::figure>

Prop	Type	Default	Description
src	string	null	The image source URL.
alt	string	''	Alternative text for accessibility.
caption	string	null	Text caption displayed below the image.
aspect	string	null	Desired aspect ratio: 'square' (1:1), 'video' (16:9), 'standard' (4:3), 'portrait' (3:4), 'cinema' (21:9), 'vertical' (9:16). Supports both '4/3' and '4:3' notations.
srcset	string	null	Responsive image sources.
sizes	string	null	Responsive image sizes.

Usage

blade

<x-plume::figure src="image.jpg" caption="A beautiful landscape" />