Horizontal band layout
A page split into full-width background stripes, each marking a new section while the content stays aligned to one inner grid.
See it
What it is
A horizontal band layout divides a page into full-width stripes, with a background color, image, or texture marking each major section. The background reaches both viewport edges while the headings and content usually stay aligned to one shared inner wrapper.
Reach for it on long landing pages, reports, and homepages where the reader needs clear chapter breaks. Alternating a neutral surface with one tinted surface can separate features, proof, pricing, and the final call to action without drawing a border around every block.
Gotcha: a new color for every section turns the page into a layer cake and makes hierarchy harder to read. Reuse a small surface palette, give each band enough vertical padding, and check text contrast separately on every background. Keep inner content on the same columns so the page still feels connected.
Ask AI for it
Build the page as five semantic section elements in horizontal bands. Make each section full-bleed with width: 100%, alternate only two CSS custom-property surfaces, and place its content inside the same max-width: 72rem wrapper with margin-inline: auto. Use padding-block: clamp(4rem, 8vw, 8rem), preserve one shared column grid, and verify WCAG AA text contrast on both backgrounds.