Section

Full-width page section with vertical rhythm, background variants, and width containment. The outermost layout unit in a page stack.

Anatomy

A Section is always two nested elements: the outer shell (full-bleed background + vertical padding) and an inner container (max-width + auto margins). Never mix concerns between the two.

← outer shell — controls width: 100%, background, vertical padding

← inner container — controls max-width + mx-auto

content

Vertical Padding Presets

Section vertical rhythm is driven by three responsive token values. Use them consistently so page stacks breathe evenly across breakpoints.

Compact — clamp(2rem, 5vw, 4rem)

Tight sections: banners, dividers, short CTAs.

Standard — clamp(3rem, 8vw, 6rem)

Default for most content sections: features, testimonials, grids.

Generous — clamp(5rem, 12vw, 9rem)

Hero sections, landing page openers — needs room to breathe.

Inner Container Width

The outer shell always stretches edge-to-edge. The inner container constrains readable content. Mix widths within the same section (e.g. full-bleed image + prose caption) by nesting containers.

Full bleed none

Edge-to-edge. Use for background images, decorative stripes, or overflow carousels.

Wrapper var(--width-wrapper) / 1280px

Standard page width. Suits feature grids, card rows, most marketing sections.

Narrow var(--width-narrow) / 860px

Forms, articles, settings pages — prevents line lengths from becoming unreadable.

Prose var(--width-prose) / 70ch

Long-form text. Optimal line length for comfortable reading.

Background Variants

Backgrounds live on the outer shell only. They create visual rhythm between stacked sections — alternating between these keeps pages from looking flat without adding decorative noise.

White

Default. Start and end with white when unsure.

Surface

Subtle alternation — softer than a hard rule separator.

Dark

High-contrast break. Good for stats, testimonial quotes, CTAs.

Accent

Brand-color sections. Use sparingly — one per page max.

Gradient

Hero openers or feature highlights. Never stack two gradients.

Image / tint

Background image pattern. Always add a semi-transparent overlay for text legibility.

Section Dividers

How adjacent sections meet. Choose based on visual weight — hard rules add structure, angled cuts add energy, no separator lets backgrounds do the work.

No separator — background change alone

Hard rule border-t border-zinc-200

Angled cut — SVG clip-path

Use clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%) on the upper section. Adjust the 88% to control angle steepness.

Wave — inline SVG at section bottom

Place the SVG as the last child of the upper section. Fill color must match the next section's background.

Interactive Playground

Compose vertical padding, inner width, and background in real time.

Padding Y Inner width Background

Section content

Real-world Page Stack

A typical landing page rhythm — six sections, alternating backgrounds, one accent break.

Hero — generous padding · gradient bg · wrap inner

Opens with full energy. Gradient background, generous vertical space.

Logos — compact padding · white bg · wrap inner

Low-key social proof. Compact padding keeps it from feeling like a section.

Features — standard padding · surface bg · wrap inner

Core value props. Surface bg separates it from logos without a hard rule.

Testimonials — standard padding · dark bg · wrap inner

Trust signal. Dark background creates a strong visual break.

Pricing — standard padding · white bg · wrap inner

Decision section. White keeps it neutral and clean.

CTA — compact padding · accent bg · narrow inner

Final push. Accent color + narrow container focuses the eye.

Rules of thumb

One job per element. The outer shell controls background and vertical space. The inner container controls horizontal width. Never mix them.
Alternate backgrounds, not borders. Use background changes to separate sections. Add a border only when two adjacent sections share the same background.
Consistent padding tokens. Use --spacing-section-y or --spacing-section-gap — never magic numbers. This makes global rhythm changes a one-token edit.
Angled / wave dividers are decoration. Don't let them become a project standard — one or two per page maximum.
Section ≠ component. A Section wraps components. It should contain no unique logic or specific UI patterns — delegate those to the components inside it.