/// Layout
Section
A full-bleed vertical rhythm band using the brand section spacing.
import { Section } from "@protocore/pds";Basics
Section renders a <section> with the brand block padding above and below. Nest a Container inside to keep content measured while the band stays full-bleed.
Validator set
A Section is a full-bleed vertical rhythm band. It owns the block padding above and below; a Container inside keeps the content measured.
Surface and tight
surface fills the band and adds top/bottom hairlines to carve a page into alternating zones. tight halves the vertical rhythm for denser stretches.
Default band — page background.
Surface band
`surface` fills the band with the surface colour and adds top and bottom hairlines — used to break a long page into alternating zones.
`tight` halves the vertical rhythm.
When to use it
Section owns vertical rhythm — the consistent breathing room between major page bands. Container owns horizontal bounds. They compose: a page is a stack of Sections, each wrapping one Container. Use surface sparingly, only to signal a genuine change of zone (e.g. a feature band between two content bands); reaching for it on every section flattens the contrast it buys. For spacing *within* a section, use Stack.
Usage
Do
- Wrap each Section's content in a Container so the band bleeds edge-to-edge but text stays measured.
- Alternate a surface Section between plain bands to mark a distinct zone.
- Use tight for compact, secondary bands like a strip of stats.
Don't
- Add ad-hoc margin-top to the next block instead of letting Sections own the rhythm.
- Set surface on every Section — the alternation stops reading as a signal.
- Use a Section for horizontal centring; that is Container's role.
Accessibility
- Renders a semantic `<section>` element.
- A `<section>` only becomes a landmark when it has an accessible name — add `aria-label` or `aria-labelledby` (pointing at a heading) when it should be a navigable region.
Section props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
style | CSSProperties | — | |
surface | boolean | false | Render as a surface band — surface background plus top/bottom hairlines. |
tight | boolean | false | Halve the vertical rhythm to 72px block padding. |