Landing Page Sections
Sections are page-width blocks that own their own vertical rhythm: a hero, a pricing band, a testimonial carousel, a logo wall. They are opinionated about layout in a way individual components are not, which makes them the fastest route from empty page to something that looks shipped. Treat the copy and imagery as placeholder scaffolding and the structure as the real payload; the spacing, breakpoints and motion timing are the parts that took the longest to get right.
10 entries in this category
All 10 sections · 4 free
Find Us Map Section
sectionsA street map printed in the shop's colour, the address set large, a live "Open until 18:00" readout in the shop's own time, the week's hours, nearby stations and one-tap directions — no API key.
Service Price Ledger
sectionsA price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
Hanging Quote Section
sectionsA pull quote with the opening mark optically aligned — measured from the real glyph, not a guessed em value.
Sticky Index Section
sectionsAn editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.
Spec Ledger Section
sectionsA dense spec table with real header association, a focusable scroll region, and a sticky head that keeps its rule.
Kinetic Stat Board
sectionsMetrics, deltas and sparklines that all count in together from one shared loop.
Stacked Type Hero
sectionsOversized, tightly-stacked headline words that reveal in on mount — big type as sculpture.
Vertical Timeline Reveal
sectionsA scroll-triggered vertical timeline whose dots and cards reveal in sequence.
Animated Stat Grid
sectionsA row of stat counters that count up together the moment they scroll into view.
Scroll-Linked Image Mask Reveal
sectionsAn image whose circular clip-path mask grows and shrinks in lockstep with scroll.