When to use it

Use ImageBlock when a page section needs a standalone image with an optional caption. It is the simplest visual block in the storefront system: no overlays, no CTAs, no text composition. Just an image at a consistent aspect ratio with optional figure caption.

For images with overlaid text or CTAs, use Hero or LinkBlock instead. For images paired with editorial copy side by side, use TextContentWithImage.

Composition notes

ImageBlock is a minimal prop-driven component:

• image takes an ImageAsset with src and alt. Renders inside a <figure> element.
• aspectRatio controls the image crop: 4:5 (portrait, default), 16:9 (landscape), or 1:1 (square).
• caption renders as a <figcaption> below the image when provided.
• className adds layout or max-width constraints.

Behavior and theming guidance

The image uses object-cover to fill the aspect ratio container, so it crops from the center on non-matching source images. This keeps visual consistency across pages without requiring exact image dimensions.

Captions render in a small muted text style below the image. They work well for attribution, location notes, and brief context that should not compete with the image.

Use className to constrain the block width (e.g. max-w-4xl) when it sits inside a wider layout context. Without a max-width, the image fills its container.