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/content-with-gallery.

When to use it

Use ContentWithGallery when a section needs editorial copy plus a supporting image gallery in one composed block. It works well for campaign storytelling and product-led content sections.

Composition notes

layout switches between image-above and side-by-side. images drives the gallery content, while productCards lets you extend the section with linked product content when the story should also sell.

The gallery itself uses a simple responsive grid, moving from two image columns into three on larger screens. In side-by-side mode the section collapses back to one column before it reaches large-screen widths, so keep the copy self-contained enough that it still reads well above the gallery.

Behavior and theming guidance

Choose side-by-side when the copy needs equal weight with the visuals. Use colorTheme to tie the whole section into the broader page palette instead of styling the text and gallery separately.

When you add productCards, treat them as a short follow-up, not a second full section. A couple of cards that continue the story usually work better than a dense product strip competing with the gallery.

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

Implementation notes