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

When to use it

Use TextContentWithImage when an editorial section needs both structured copy and a supporting image side by side (or stacked). It works for brand stories, process explanations, collection narratives, and any section where text alone would feel flat but a full Hero would be too heavy.

If the section is text-only, use TextContent. If it needs a full-bleed background image, use Hero.

Composition notes

TextContentWithImage is a slot-recipe component with a few layout decisions:

• variant controls the overall structure: side-by-side (default), stacked, or overlap.
• imagePosition controls whether the image appears first or last in the layout. For side-by-side, this means left or right. For stacked, this means above or below.
• image takes an ImageAsset with src and alt.
• Text props match TextContent: preheader, heading, body, plus optional buttonLabel/buttonHref and textLinkLabel/textLinkHref.
• colorTheme sets the background and text color treatment.

Alternate image sides for rhythm

On long-scroll pages with multiple story sections, alternate imagePosition between "first" and "last" on consecutive blocks. This creates a natural zig-zag rhythm that keeps the layout engaging.

Behavior and theming guidance

The side-by-side layout stacks vertically on mobile and sits in a two-column grid on larger screens. The overlap variant lets the text area partially overlap the image edge for a more editorial feel.

Image radius responds to --enad-image-radius and the gap between image and text responds to --enad-text-content-gap, so the visual density adapts to the active theme.

classNames now exposes stable hooks for both layout anatomy (inner, imageArea, textArea) and copy anatomy (preheader, heading, body, actions). That makes it realistic to produce wildly different implementations — restrained utility sections, serif-heavy editorial spreads, dense campaign rows — while keeping the same accessibility and layout behavior.

The component uses the same heading CSS variables as TextContent and Hero, so editorial tone stays consistent across all text-bearing storefront blocks.

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

Implementation notes