SectionHeader

A section's heading with metadata and a secondary action, one level below PageHeader.

Members

People with access to this workspace.

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add section-header

What add section-header installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

People with access to this workspace.

The usual section heading in a settings page.

Healthy24 this weekLast one 12 min ago

Counts, dates and a status under the title; everything wraps in narrow containers.

Keys are shown once when you create them.

level={3} inside a card, under a section that already has an h2.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`SectionHeader` Row of text and actions; wraps by available width, so it works in cards and side panels too.	`div`	—
`SectionHeaderContent` Groups title, description and metadata; takes the free space.	`div`	—
`SectionHeaderTitle` The section heading; level 3 or 4 renders h3/h4 for nested sections.	`h2`	`level = 2`
`SectionHeaderDescription` One line of context.	`p`	—
`SectionHeaderMeta` Small muted facts (counts, dates, a StatusBadge) that wrap.	`div`	—
`SectionHeaderActions` Secondary actions at the end; they drop below the text when space runs out.	`div`	—

The title is a real heading, so the section shows up in screen reader heading navigation; pick level to match the outline (h1 is PageHeader's).

When the actions wrap below the text, DOM and reading order stay the same: heading first, then actions.

Keep actions secondary and specific ("Invite member"); icon-only buttons need an aria-label.

Server-safe: plain HTML and CSS.