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.