BlockHeading

React SDK guidance for BlockHeading.

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

When to use it

Use BlockHeading when a section needs a preheader, headline, and supporting copy that follow one consistent rhythm. It works well for editorial intros, campaign headers, and content sections that should share the same heading treatment.

Composition notes

BlockHeading is prop-driven. Use headingTag for document structure, headingSize for visual weight, and align when the section layout needs centered or right-aligned copy. headingClamp and bodyMaxWidth are useful when the surrounding grid needs more control over text length.

headingSize scales responsively, so pick the size for the section's overall importance rather than only for desktop. sm and md work well inside denser content grids, while lg and xl make more sense for campaign hero sections and wide editorial openers.

Behavior and theming guidance

Use the default color resolution first, then reach for preheaderColor, headingColor, or bodyColor only when the section has a stronger custom art direction. Set dark when the block sits on a dark surface so the text tokens flip automatically.

Keep headingTag tied to the page outline even when the visual size stays large. For long headlines, use headingClamp to protect the layout and bodyMaxWidth to stop the supporting copy from stretching too far across wide sections.

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

Implementation notes

BlockHeading

# BlockHeading > 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/block-heading](https://sdk.enad.io/components/storefront/block-heading). ## When to use it Use `BlockHeading` when a section needs a preheader, headline, and supporting copy that follow one consistent rhythm. It works well for editorial intros, campaign headers, and content sections that should share the same heading treatment. ## Composition notes `BlockHeading` is prop-driven. Use `headingTag` for document structure, `headingSize` for visual weight, and `align` when the section layout needs centered or right-aligned copy. `headingClamp` and `bodyMaxWidth` are useful when the surrounding grid needs more control over text length. `headingSize` scales responsively, so pick the size for the section's overall importance rather than only for desktop. `sm` and `md` work well inside denser content grids, while `lg` and `xl` make more sense for campaign hero sections and wide editorial openers. ## Behavior and theming guidance Use the default color resolution first, then reach for `preheaderColor`, `headingColor`, or `bodyColor` only when the section has a stronger custom art direction. Set `dark` when the block sits on a dark surface so the text tokens flip automatically. Keep `headingTag` tied to the page outline even when the visual size stays large. For long headlines, use `headingClamp` to protect the layout and `bodyMaxWidth` to stop the supporting copy from stretching too far across wide sections. ## 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=BlockHeading. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes