TextContent

Editorial content block for brand storytelling, campaign messaging, and section intros. Supports standard, pull-quote, and column variants with CTA options.

Best for

brand storytellingcampaign messagingsection intros

Import

import { TextContent } from "@enadhq/enad-react-sdk/client/storefront"

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)

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.

Examples

Live examples you can edit directly in the sandbox.

4 examples

Brand story block

The default variant with a preheader, heading, body copy, and both button and text-link CTAs.

Indented editorial layout

The text-indent layout shifts the body copy to the right, giving campaign storytelling a quieter rhythm.

Pull quote on dark

Use the pull-quote variant with an inverse color theme for standout editorial sections that break the page rhythm.

Wide column layout

The columns variant spreads content wider and works well for material guides, process explanations, and content-heavy sections.

Slots

bodyheadingrootinnercopypreheaderactions

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

Prop	Type	Default	Description
preheader	string	—	Small label displayed above the heading
heading	string	—	Primary heading text
body	string	—	Body paragraph text
variant	string	"default"	Visual treatment of the text block
layout	string	"default"	Text layout sub-option controlling max-width and indentation
buttonLabel	string	—	Label for the primary CTA button
buttonHref	string	—	URL the CTA button navigates to
textLinkLabel	string	—	Label for the secondary text link
textLinkHref	string	—	URL the text link navigates to
colorTheme	string	—	Background and text color theme applied to the section
classNames	Partial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").TextContentSlot, string>>	—	No description yet. Slot keys bodyheadingrootinnercopypreheaderactions
className	string	—	No description yet.