When to use it

Use CardImageWithCaption when an image needs a structured title and caption below it in a card format. It fits editorial galleries, team member profiles, process step illustrations, and any grid where images need consistent captioning.

For standalone editorial images without card framing, use ImageBlock. For images with overlay text and navigation intent, use LinkBlock or LinkBlockSmall.

Composition notes

CardImageWithCaption is a minimal figure component:

• image renders at a fixed 4:5 aspect ratio with object-cover.
• title appears as bold text below the image.
• caption appears as smaller muted text below the title.
• If no image is provided, a placeholder renders in its place.
• The figcaption only renders if title or caption is present.

Behavior and theming guidance

The image always renders at 4:5 portrait aspect, which keeps grids of these cards visually consistent regardless of source image dimensions. Control the card width through the parent container or className.

This is one of the simplest storefront blocks. It does not have variants, color themes, or interactive states. Its value is consistent, captioned image presentation in grids.