Layout component

Section Header

Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.

10 props3 slots0 outputsTheme readyResponsive

Interactive playground

Configure Section Header

Change any prop and inspect the server-rendered component immediately.

Live preview

Section Header example

A polished default section header for a modern application.

Component code

<SectionHeader
  title="Section Header example"
  description="A polished default section header for a modern application."
  align="start">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</SectionHeader>

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Left-aligned section header

Introduce features, services, content groups, or dashboard areas.

Live preview

Public services

Everything citizens need

Discover online services, directories, guidance, and verified public information.

Component usage.wrn

<SectionHeader
  eyebrow="Public services"
  title="Everything citizens need"
  description="Discover online services, directories, guidance, and verified public information.">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</SectionHeader>

Compact

Centered section header

Use centered hierarchy above feature grids, testimonials, and campaign content.

Live preview

Capabilities

A consistent component system

Compose complete pages without rebuilding spacing and typography.

Component usage.wrn

<SectionHeader
  eyebrow="Capabilities"
  title="A consistent component system"
  description="Compose complete pages without rebuilding spacing and typography."
  align="center"
  size="compact">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</SectionHeader>

Advanced

Large editorial header

Use a larger heading for major landing-page sections and product storytelling.

Live preview

Platform

Designed for complex public and enterprise interfaces

Theme-aware, responsive, accessible, and server-rendered.

Component usage.wrn

<SectionHeader
  eyebrow="Platform"
  title="Designed for complex public and enterprise interfaces"
  description="Theme-aware, responsive, accessible, and server-rendered."
  size="large"
  maxWidth="full">
  <div data-slot="icon">
    <div class="showcase-slot">icon slot</div>
  </div>
  <div data-slot="actions">
    <div class="showcase-slot">actions slot</div>
  </div>
</SectionHeader>

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`id`	string	`""`	No
`eyebrow`	string	`""`	No
`title`	string	`""`	No
`description`	string	`""`	No
`align`	string	`"left"`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`headingLevel`	number	`2`	No
`maxWidth`	string	`"3xl"`	No
`class`	string	`""`	No