# Section - **Category:** Layout (`layout`) - **Slug:** `layout/section` - **Status:** stable - **Platforms:** web - **Import:** `import { Section } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/layout/section > A full-bleed vertical rhythm band using the brand section spacing. ## 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 `Section`s, 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`. ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `className` | `string` | no | — | — | | `style` | `CSSProperties` | no | — | — | | `surface` | `boolean` | no | `false` | Render as a surface band — surface background plus top/bottom hairlines. | | `tight` | `boolean` | no | `false` | Halve the vertical rhythm to 72px block padding. | ## Examples ### Basics `Section` renders a `
` with the brand block padding above and below. Nest a `Container` inside to keep content measured while the band stays full-bleed. ```tsx import { Section, Container, Heading, Text } from "@protocore/pds"; export default function SectionBasics() { return (
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. ```tsx import { Section, Container, Eyebrow, Heading, Text } from "@protocore/pds"; export default function SectionSurface() { return (
Default band — page background.
Throughput 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.
); } ``` ## Do & don't **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 **Notes** - Renders a semantic `
` element. - A `
` 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. ## Related `container`, `stack`, `grid`, `app-shell` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/