← All Components

ImageCard

A card component for displaying images with captions. No external dependencies.

Default

A beautiful landscape captured at golden hour.
A beautiful landscape captured at golden hour.

Custom Width

Override the default width with a className.

A wider card for panoramic images.
A wider card for panoramic images.

Gallery

Multiple image cards arranged in a flex layout.

Mountain vista
Mountain vista
Ocean sunset
Ocean sunset
Forest trail
Forest trail

Custom Alt Text

Provide an explicit alt prop for accessibility when the caption is not descriptive enough.

A brutalist building facade with exposed concrete and geometric shapes
Brutalist architecture

Props

PropTypeDescription
imageUrlstringURL of the image to display
captionstringCaption text rendered below the image
altstringAlt text for the image (defaults to caption)
classNamestringAdditional classes on the root figure element

Usage

<ImageCard imageUrl="/images/photo.jpg" caption="A descriptive caption for the image." alt="Detailed alt text for accessibility" className="w-[300px]" />