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/card-image-with-caption.

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.

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=CardImageWithCaption.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes