Section Header

Usage

Anchor for a content section below it — typically a Card Group, Feature Dense, or Media + Text row. The heading sets the section's meaning; the description gives one sentence of context; the CTA sends a reader to a deeper resource. Use sparingly — one Section Header per section, and not every section needs one.

Content length

Heading renders as an h2 with display weight and a short underline rule. One short statement — ~60 characters reads cleanly. The rich-text editor allows bold, italic, underline, and adh_claim embeds.

Description is a single paragraph at 1.25rem body weight. Max ~720px wide; aim for one or two sentences. Same rich-text controls as the heading.

CTA is a single link styled as a chevron CTA. The URL should resolve to a deeper page; the text should be a verb phrase. Skip the CTA when there's nothing more to read.

Variations

Two schema-driven knobs: alignment (start or center) and background_color (background or background.weaker). Start-aligned indents the description and CTA on larger screens to line up with the heading's underline rule. Centered pulls everything to the center axis.

Color cascade

The underline and CTA pick up the active theme's primary palette. Heading and description stay neutral.