Section
A full-bleed horizontal band with a fixed-width Container inside it. The unit that full-width pages like the home page are built from.
import Section from '@/components/ui/Section';Source: src/components/ui/Section.tsx
Examples
Bands with backgrounds
The band spans the viewport, the content inside it does not. That split is the whole reason this exists: a coloured band drawn with a Container inside would stop at the measure and leave white edges.
spacing="md" on grey-50
a full-bleed band
Vertical spacing
none / md 40px / lg 80px. lg is the default — bands are meant to breathe.
spacing="none"
spacing="md" — 40px
Props
<Section> props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'md' | 'lg' | 'lg' | — |
spacing | 'none' | 'md' | 'lg' | 'md' | Vertical padding of the band: md 40px (default), lg 60px. |
containerClassName | string | '' | Extra classes for the inner Container (e.g. text-center). |
childrenrequired | ReactNode | — | — |
Also accepts everything in HTMLAttributes<HTMLElement> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Usage
Do
- Use it outside the (content) route group, for pages made of bands.
- Put the band’s background on the Section, and the content inside it.
Don’t
- Don’t use it inside a Container — the band can’t bleed from there.
Related:Container