DocsDocsSDKs

ImageBlock

React SDK guidance for ImageBlock.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

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 `` element.
  • aspectRatio controls the image crop: 4:5 (portrait, default), 16:9 (landscape), or 1:1 (square).
  • caption renders as a `` 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.

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/storefront.
  • Playground route: /sandbox?component=ImageBlock.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

ImageBlock

# ImageBlock > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/storefront`. - Live playground: [/components/storefront/image-block](https://sdk.enad.io/components/storefront/image-block). ## 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 `
` element. - **`aspectRatio`** controls the image crop: `4:5` (portrait, default), `16:9` (landscape), or `1:1` (square). - **`caption`** renders as a `
` 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. ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=ImageBlock. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes