SectionHeader

A consistent heading hierarchy with an eyebrow, subtitle and supporting footnote.

SectionHeader

View source · API reference

A complete section heading

Each text layer has a distinct job. The default heading level is h2.

THE COMPONENT SYSTEM

Small pieces. Complete interfaces.

Compose a page from focused components that share one theme.

Every example includes its source.

<SectionHeader
  eyebrow="THE COMPONENT SYSTEM"
  title="Small pieces. Complete interfaces."
  subtitle="Compose a page from focused components that share one theme."
  footnote="Every example includes its source."
/>

Fit the document hierarchy

Use h3 when the header belongs inside a section. Utility classes adjust appearance without changing semantics.

Within a card

The heading level follows the document, not the font size.

Ready to use 
<Panel bodyClass="p-4">
  <SectionHeader
    title="Within a card"
    titleTag="h3"
    titleClass="fs-h4 mb-2"
    subtitle="The heading level follows the document, not the font size."
    subtitleClass="mb-0"
  >
    <Badge tone="success">Ready to use</Badge>
  </SectionHeader>
</Panel>

Behavior and accessibility

Choose heading levels in order. Visual size and heading semantics are independent. Empty text props omit their blocks; avoid empty headings and do not use the eyebrow as the only label.

API reference

SectionHeader contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

subtitle

RefOrValue<string>
Default
not set

Supporting text beneath the title.

footnote

RefOrValue<string>
Default
not set

Supporting note below the section description.

titleTag

RefOrValue<string>
Default
h2

Heading element. Accepts h1–h6, p, div or span; invalid values fall back to h2. Match the surrounding document hierarchy.

titleId

RefOrValue<string>
Default
not set

Id on the title element. Reference it from the surrounding section with aria-labelledby.

eyebrowClass

RefOrValue<string>
Default
not set

Additional classes on the eyebrow element. Use existing typography and spacing utilities.

titleClass

RefOrValue<string>
Default
not set

Additional classes on the title element. Use existing typography and spacing utilities.

subtitleClass

RefOrValue<string>
Default
not set

Additional classes on the subtitle element. Use existing typography and spacing utilities.

footnoteClass

RefOrValue<string>
Default
not set

Additional classes on the footnote element. Use existing typography and spacing utilities.

Composition

Default slot: content following all text blocks, such as a badge or supporting link. Register defineSectionHeaderComponents.