Every component, measured at three widths.

18 components

SearchSort

18 components

Content & Layout
Icon feature grid
A short editorial lead-in above a dense grid of icon-topped feature cards that trade colours with their icon tile on hover.
Navigation
Sticky mega menu header
A sticky site header that frosts on the first pixel of scroll, opens wide mega panels from its nav, and collapses to a full-screen sheet.
Social Proof
Social proof closer
A dark closing section stacking a pull quote beside review artwork, a row of headline figures, and a call to action over a soft glow.
Navigation
Expanding pill nav
A floating glass navigation pill that widens once the page scrolls, and collapses its links behind a toggle on small screens.
Media & Effects
Focus reveal statement
A centred statement whose words come into focus one after another as the page scrolls past, blurring again on the way back.
Content & Layout
Pinned feature tour
A feature panel that pins to the viewport and advances step by step as the page scrolls past it.
Content & Layout
Overlapping feature tabs
A vertical tab list of features beside the artwork for the selected one, over a tinted panel that overlaps the seam.
Conversion
Split image CTA
A call to action laid out as one rounded card split between copy and a full-bleed image.
Media & Effects
Image comparison slider
Two versions of one scene in a single frame, with a divider you drag, tap or arrow across to reveal each.
Content & Layout
Bento feature grid
A centred statement over an asymmetric grid of dark feature cards whose media zooms and plays under the pointer.
Heroes
Framed hero
A full-viewport hero inside a rounded panel, with a scrimmed backdrop and a headline that rises line by line.
Navigation
Panel footer
A site footer drawn as a rounded dark panel inset from the page edge, with link groups, contact details and a call to action.
Metrics
Metric statement
A centred statement over a row of metrics that count up when the section scrolls into view.
Services
Service showcase
Alternating service rows pairing a window-framed media panel with an exclusive accordion and a call to action.
Content & Layout
Process timeline
A numbered vertical timeline whose rail fills as you scroll, beside a sticky list of principles.
Content & Layout
Capability grid
A ruled grid of numbered capability cells closing on an inverted panel, with a hover rule that wipes in.
Content & Layout
Problem ledger
A sticky editorial intro beside a numbered, hairline-ruled list whose rows indent on hover.
Social Proof
Story carousel
A fanned stack of customer-story cards on a gradient band, with dot controls and a timed advance.