Sections
Full-width bands that group blocks behind a shared background, spacing and optional box.
What it is
A section is a full-width band that groups blocks behind a shared background colour, spacing and an optional box or border. Sections split a page into visually distinct regions — they suit landing and homepage layouts. Ordinary content pages don't need them.
How to add it
Add a Section block, then drop blocks inside it. A heading placed first becomes the section title and a paragraph after it the section intro; everything else — text, grids, media — renders inside the band's container.
Housing assistance — support for renters, buyers and people at risk of homelessness.
Configure it
A section carries the Design System's section options: a background colour, spacing (full, half or none), a box (rounded, bordered), inverted text, and an optional background image.
Colour
Spacing
Tips
Sections are all-or-nothing per page: once a page uses one section, every top-level group is banded (the homepage rhythm); a page with no section stays a plain content column. Use colour sparingly — most sections are plain, with the odd coloured band for emphasis.
Related pages
See also: Cards and Media, which are commonly placed inside sections.
Example
Full padding
Half padding
No padding
Image
Box
Brand Dark
Brand Light
Brand Supplementary
Black
White
Off White
Grey 01
Grey 02
Grey 03
Grey 04