SectionHeader

Mono eyebrow, heading and lede.

Preview

Components

A page for each part

A live preview, the code that produced it and the options, from one file.

src/examples/section-header/example.astro

---
import { SectionHeader } from "@/presentation/components/site/section-header";
---

<SectionHeader
  eyebrow="Components"
  title="A page for each part"
  lede="A live preview, the code that produced it and the options, from one file."
/>

Add to your site

npx docs-sitekit add section-header

It writes these files, and keeps a file you changed:

src/presentation/components/site/section-header.tsx

It requires these entries of the registry, which add restores first:

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of SectionHeader
Key	Type	Default	Allowed values	Description
`as`	string	"h2"	"h2", "h1"	The heading element. Use "h1" for the heading that names the page.
`eyebrow`	string	-	-	A short line in mono type over the heading.
`title`	string	required	-	The heading.
`lede`	string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode>	-	-	A sentence under the heading.
`className`	string	-	-	Classes added to the wrapper.
`children`	string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode>	-	-	An action, shown on the right of the text, or under it on a phone.

Variants and states

The heading of the page

as="h1" for the one heading that names the page.

Examples

Working examples you can copy and adapt.

src/examples/section-header/page-heading.astro

---
import { SectionHeader } from "@/presentation/components/site/section-header";
---

<SectionHeader as="h1" title="Examples" lede="Working examples you can copy and adapt." />

With an action

Children go on the right, and wrap under the text on a phone.

Docs

Guides and reference

See all

src/examples/section-header/with-action.astro

---
import { buttonVariants } from "@/presentation/components/ui/button";
import { SectionHeader } from "@/presentation/components/site/section-header";
---

<SectionHeader eyebrow="Docs" title="Guides and reference">
  <a href="#" class={buttonVariants({ variant: "outline" })}>See all</a>
</SectionHeader>

About

The top of a section: a short eyebrow in mono type, a heading and a lede. Children go on the right, and wrap under the text on a phone.

Accessibility

The heading is an h2. A page has one h1, so pass as="h1" only for the heading that names the page.
The eyebrow is a paragraph, not a heading, so it adds nothing to the outline of the page.
The heading and the lede use the fg-bright and fg-muted tokens, which reach AA in both themes.

Source

section-header.tsx

Edit this page

Last updated 5 November 2026