Figure

An image element with optional caption and aspect ratio control.

Examples

Basic Figure

Standard image with a caption.

A burger
Delicious burger with fries.
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.

Pizza
Wood fired pizza.
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.

Dessert
Sweet treat: Strawberry cake.
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" />