Stacked Bands
Horizontal full-width sections of alternating background color or texture, stacked top to bottom.
A stacked-bands layout divides the page into horizontal full-width 'bands' — each one a self-contained section with its own background color, image, or texture. The reader scrolls vertically through them like turning pages.
The pattern dominates marketing sites because each band can host one message, one CTA, one visual without competing for attention. It scales perfectly to mobile because the structure is already vertical.
- Marketing pages with 5–8 distinct sections
- SaaS landing pages
- Anywhere you want bold rhythm changes between sections
- Dense reference content where pagination would be lost
- +Alternate band backgrounds (light, dark, light) to create rhythm
- +Match section padding so bands feel equally weighted
- −Don't make every band the same color — the rhythm collapses
Textbook examples in the directory
Lavender and cream, generous rounding, friendly and approachable.
Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows.
A soft modern SaaS surface with the warmth of a marshmallow. Cream-mallow page background, butter-soft cards with generous radius, Manrope for UI and DM Mono for figures, a single muted lavender accent reserved for the primary CTA and the active sidebar item. Built for early-stage product pages, friendly B2C dashboards, and onboarding flows that need to feel approachable without going saccharine.
People also ask
What is a stacked-bands layout?
Full-width horizontal sections stacked vertically, each band a different color, image, or content type — the page reads as a sequence of distinct chapters.
When are stacked bands the right choice?
Marketing pages, long-form storytelling, and product launches where each section has its own subject and you want strong vertical rhythm.
How do I keep stacked bands from feeling boring?
Vary the band heights, alternate background tones, and shift the inner alignment (left / center / right) so the eye doesn't fall into a predictable rhythm.
How tall should each band be?
Aim for 60–100vh on desktop. Going below 50vh makes bands feel cramped; over 100vh forces too much scrolling between ideas.