Section & PageHeader
The standard page bones: full-bleed bands with width-capped columns, and one consistent heading block — instead of every page hand-rolling its own.
PageHeader
Page title with actions
Settings / Team
Members
Everyone with access to this workspace.
Snippet
import { PageHeader, Button } from '@creo-team/buzz-ui/server'
<PageHeader
eyebrow="Settings / Team"
title="Members"
description="Everyone with access to this workspace."
actions={<><Button variant="outline" size="sm">Export</Button><Button size="sm">Invite</Button></>}
divider
/>Scales and levels
Landing hero
clamp()-sized with tight tracking.
Page title
The default scale.
Section heading
For headers inside a page.
size is visual; level sets the heading element — keep one h1 per page and pick sizes freely.
Section
Alternating bands
Default band
Page background.
Muted band
Secondary surface.
Raised band
Surface with hairline borders.
Snippet
import { Section } from '@creo-team/buzz-ui/server'
<Section width="wide" padding="spacious">…hero…</Section>
<Section variant="muted" width="wide" padding="spacious">…features…</Section>
<Section width="narrow">…prose…</Section>This site's homepage is built from exactly these bands — no wrapper divs, no bespoke max-width utilities.
Section API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'muted' | 'raised' | 'default' | Band surface treatment. |
width | 'narrow' | 'default' | 'wide' | 'full' | 'default' | Inner column max-width: 42rem / 72rem / 80rem / none. |
padding | 'none' | 'compact' | 'default' | 'spacious' | 'default' | Vertical rhythm of the band. |
as | 'section' | 'div' | 'article' | 'aside' | 'section' | Rendered element. |
PageHeader API
| Prop | Type | Default | Description |
|---|---|---|---|
title* | ReactNode | — | The heading. |
description | ReactNode | — | Supporting sentences, max-width 65ch. |
eyebrow | ReactNode | — | Slot above the title — breadcrumbs, back link, label. |
actions | ReactNode | — | Trailing-edge actions; wraps under the title on small screens. |
size | 'sm' | 'md' | 'lg' | 'md' | Type scale. |
level | 1 | 2 | 3 | 1 | Heading element, independent of size. |
align | 'start' | 'center' | 'start' | Center for landing-page section headers. |
divider | boolean | false | Hairline rule under the header. |