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.

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.