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.

When to use it

Use TextContent for editorial sections that need structured copy with optional CTAs. It covers brand stories, campaign messaging, section intros, pull quotes, and any text-first block between visual sections.

If the text needs a supporting image alongside it, use TextContentWithImage instead. If it needs a full-bleed background image, use Hero.

Composition notes

TextContent is prop-driven with three visual variants:

• variant="default" is the standard text block with a preheader, heading, body, and optional CTAs. Use layout to choose between default, text-indent (heading left, body right), or wide.
• variant="pull-quote" renders the heading as a large accent-bordered quote. Good for breaking page rhythm with a standout editorial statement.
• variant="columns" spreads the content into a wider grid layout. Works well for material guides and process explanations where the body copy is longer.

Props build the content stack:

• preheader (small uppercase label), heading, body (paragraph text)
• buttonLabel + buttonHref (primary CTA button)
• textLinkLabel + textLinkHref (secondary text link)
• colorTheme controls background and text colors (default, muted, primary, inverse)

Pull-quote and inverse pair well

The pull-quote variant on an inverse color theme creates a high-contrast editorial break. Use it between lighter sections to create visual rhythm on long-scroll pages.

Behavior and theming guidance

The block responds to heading CSS variables (--enad-heading-weight, --enad-heading-tracking, --enad-heading-transform) so editorial tone adapts to the active theme without code changes.

The pull-quote variant adds a left accent border colored by --enad-accent-color. The columns variant splits heading and body into separate grid columns on wider screens.

Color themes apply full-width background sections, so consecutive text blocks with different themes create natural visual breaks without extra wrapper markup.

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

Implementation notes