Section header

SectionHeader is the section intro that sits above a card grid, a CTA band, or a hero: an eyebrow / title / description, centered and capped to a readable width. It composes ContentBlock for the vertical slot rhythm (ADR-023) and adds the one thing ContentBlock deliberately does not own — the horizontal measure and alignment that group the intro inside its band. See ADR-032.

It exists so a section intro is one component with one measure, instead of a hand-rolled wrapper that caps text at 600px on one page and full-width on the next. Drop it inside the section's width-container (Page Grid) and it caps the text within — it never sets a band width itself.

Use it for

• The centered heading + supporting line above a card grid or feature section
• A CTA band's heading, supporting line, and button
• Any section-level intro that reads as one centered (or left-anchored) text column

For a card's or CTA's inner text with no measure/centering of its own, use ContentBlock directly. For the page's own top-of-page header, use PageHeader.

Import

import { SectionHeader } from '@brikdesigns/bds';

Variants

Default

Centered, measure-md (60ch), title as <h2> at heading-lg — the section-intro default.

<SectionHeader
  title="What we do"
  description="From branding to websites to behind-the-scenes systems — we help you build a business that looks good and works better."
/>

Measure

measure caps the text column: sm (44ch) for a short intro, md (60ch, default), lg (72ch) for longer prose. The cap is the readable column inside the band — not the band width.

<SectionHeader measure="sm" title="Ready to get started?" description="Book a 15-minute walkthrough." />

Alignment

align="start" anchors the column to the band's start (left) instead of centering it; the measure cap still applies.

<SectionHeader align="start" title="Built for how you already work" description="Import your existing client list in minutes." />

With actions

The actions slot follows the description; in a centered header it centers under the text.

<SectionHeader
  title="Ready to get started?"
  description="Book a 15-minute walkthrough — no commitment required."
  actions={<Button variant="primary">Book a demo</Button>}
/>

On a filled brand band

onColor is forwarded straight to ContentBlock, which owns the swap to --text-on-color-dark. SectionHeader adds no colour CSS of its own — it still owns only measure and alignment. This is the supported route for a CTA band; the alternative it replaces was pushing a style={{ color }} through SectionHeader into a slot it does not own.

<SectionHeader
  onColor
  title="Get in touch"
  description="Starting a new project or want to collaborate with us?"
  actions={<Button variant="on-color">Let&apos;s Talk</Button>}
/>

Props

Related

• Content block — the slot-rhythm unit SectionHeader composes
• Page Header — the top-of-page header, distinct from a section intro
• Page Grid — Content measure — the --measure-* scale and the band-vs-measure distinction
• Content Rhythm — the vertical rhythm inside the intro