SectionHeader

layout

Section divider with optional number, title, and tag/eyebrow. Configurable heading level (h1-h6). Applies the brand.shead grammar.

Preview

Scale1.00

§01

Authentication

core

§02

Authorization

core

Untitled Section

Usage

import { SectionHeader } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<SectionHeader
  num="§01"
  title="Authentication"
  tag="core"
/>

// As h3 instead of default h2
<SectionHeader title="Subsection" level={3} />

Props

Prop	Type	Default	Description
`num`	`string`	--	Section number label
`title`	`string`	required	Section title
`tag`	`string`	--	Eyebrow text at the right
`level`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Heading level
`class`	`string`	--	Additional CSS classes
`id`	`string`	--	Section id for anchor links

Accessibility

Heading level: Rendered as h2 by default. Set level to maintain correct heading hierarchy.
Landmark: Use the id prop to enable anchor linking and scroll-spy.
Color: Number uses coral, tag uses muted -- both meet AA contrast on their backgrounds.

Do / Don't

Do

Use sequential numbering and consistent heading levels across a page.

Don't

Don't skip heading levels (h2 to h4) -- screen reader navigation depends on correct hierarchy.