Website sections

Over 42

Complete pieces for your next page: considered layouts, photography and GSAP motion in plain HTML, CSS and JavaScript. Choose a section, change the content and add it to your site. Vault owners only, not sold separately.

The Vault. Every item in the library, including the Vault exclusives, and everything added to it.

£99 Get the Vault See inside the Vault Browse every section

Browse sections

Kind of section

All42 HeroesFeaturesShowcasesProofOffersPeopleContactContent

42 sections

    Changelog Catch-up - A release notes section for returning users: pick the version you last used and every newer release unrolls in sequence while a summary of new features, behaviour changes and fixes assembles
    section-045 Vault exclusive

    Changelog Catch-up

    A release notes section for returning users: pick the version you last used and every newer release unrolls in sequence while a summary of new features, behaviour changes and fixes assembles.

    Flip flip-layout
    Shoppable Lookbook - An editorial room-set lookbook whose product cards grow out of markers on each photograph, hand over between pieces without closing, and add to a bag without losing the visitor's place
    section-044 Vault exclusive

    Shoppable Lookbook

    An editorial room-set lookbook whose product cards grow out of markers on each photograph, hand over between pieces without closing, and add to a bag without losing the visitor's place.

    clip-pathstate-transition
    Finish Configurator - A made-to-order product section: choose a wood and a seat, see the matched photograph of that exact finish, and read the price, lead time and next step
    section-043 Vault exclusive

    Finish Configurator

    A made-to-order product section: choose a wood and a seat, see the matched photograph of that exact finish, and read the price, lead time and next step.

    clip-path-revealinterruptible-transitions
    Product Finder - A product finder where every answer re-ranks the actual range: the best match rises into a hero tier on a tile of its own colour with the reason it fits, the rest follow in a ranked row and anything ruled out steps back
    section-042 Vault exclusive

    Product Finder

    A product finder where every answer re-ranks the actual range: the best match rises into a hero tier on a tile of its own colour with the reason it fits, the rest follow in a ranked row and anything ruled out steps back.

    Flip flip-layout
    Fold-out Workshop - A printmaking workshop invitation whose paper folds reveal the project, day programme and practical preparation through independent physical hinges
    section-041 Vault exclusive

    Fold-out Workshop

    A printmaking workshop invitation whose paper folds reveal the project, day programme and practical preparation through independent physical hinges.

    3d-transformsdrag-interaction
    Editorial Story Spread - A photographic essay section with large scroll-driven apertures that open, hold and close around each chapter, with reversible image reframing and native reading links
    section-040 Vault exclusive

    Editorial Story Spread

    A photographic essay section with large scroll-driven apertures that open, hold and close around each chapter, with reversible image reframing and native reading links.

    ScrollTrigger clip-path
    Project Enquiry - A studio enquiry form assembles a live project brief, then folds it into a sealed envelope for an honest email-draft handoff
    section-039 Vault exclusive

    Project Enquiry

    A studio enquiry form assembles a live project brief, then folds it into a sealed envelope for an honest email-draft handoff.

    css-3d-foldingreversible-timeline
    Exhibition Artwork Lens - A photographic sculpture exhibition with a tactile magnifying lens, drag and keyboard exploration, artwork captions and practical visit information
    section-038 Vault exclusive

    Exhibition Artwork Lens

    A photographic sculpture exhibition with a tactile magnifying lens, drag and keyboard exploration, artwork captions and practical visit information.

    cursor-effectsphysics
    Seasonal Menu Index - A complete seasonal restaurant menu led by a tactile draggable fan of substantial food photographs, with elastic tilt and spring settling
    section-037 Vault exclusive

    Seasonal Menu Index

    A complete seasonal restaurant menu led by a tactile draggable fan of substantial food photographs, with elastic tilt and spring settling.

    draggableelastic-fan
    Product Detail Tour - Photographic product story with guided detail inspection, contextual annotations and a complete specification destination
    section-036 Vault exclusive

    Product Detail Tour

    Photographic product story with guided detail inspection, contextual annotations and a complete specification destination.

    image-hotspotsguided-camera
    Day Arc Locations - Multi-location directory section with timezone-aware operating arcs, dynamic day and time availability filtering, and responsive Flip visit drawers
    section-035 Vault exclusive

    Day Arc Locations

    Multi-location directory section with timezone-aware operating arcs, dynamic day and time availability filtering, and responsive Flip visit drawers.

    Flip flip-layout-transition
    Shift Timetable Careers - A careers section that draws every open role as a shift across one working day under a pinned hours ruler: set the hours you could work and the roles that fit rise to the top, each shift filling where it overlaps
    section-034 Vault exclusive

    Shift Timetable Careers

    A careers section that draws every open role as a shift across one working day under a pinned hours ruler: set the hours you could work and the roles that fit rise to the top, each shift filling where it overlaps.

    Flip flip-layout
    Index Tab Footer - A calm Scandinavian shop footer: the site directory is a file of coloured index cards, and choosing a tab lifts that card out of the file and sets it down in front, beside the address, live opening hours and contact details
    section-033 Vault exclusive

    Index Tab Footer

    A calm Scandinavian shop footer: the site directory is a file of coloured index cards, and choosing a tab lifts that card out of the file and sets it down in front, beside the address, live opening hours and contact details.

    accessible-tabsinterruptible-transitions
    Odometer Reel Stats - A stats section where a sideways strip of action photographs rolls one giant odometer figure, reel by reel, as visitors swipe, drag or jump between results
    section-032 Vault exclusive

    Odometer Reel Stats

    A stats section where a sideways strip of action photographs rolls one giant odometer figure, reel by reel, as visitors swipe, drag or jump between results.

    odometer-counterhorizontal-scroll
    Query Blog Index - A dark product blog and changelog index where typing a query or picking a topic promotes the best matching post into a large lead slot, with the rest regrouping below
    section-031 Vault exclusive

    Query Blog Index

    A dark product blog and changelog index where typing a query or picking a topic promotes the best matching post into a large lead slot, with the rest regrouping below.

    Flip flip-layout
    Desk Directory Contact - A Swiss grid contact section: pick what your enquiry is about and a column of ink crosses the grid to reveal who answers, their direct line and which door to use
    section-030 Vault exclusive

    Desk Directory Contact

    A Swiss grid contact section: pick what your enquiry is about and a column of ink crosses the grid to reveal who answers, their direct line and which door to use.

    accessible-tabsclip-path-reveal
    Folded Letter Signup - A newsletter signup for a small hotel where a journal-style landing opens on past letters that fold in thirds, slide away and open again as visitors choose one to read
    section-029 Vault exclusive

    Folded Letter Signup

    A newsletter signup for a small hotel where a journal-style landing opens on past letters that fold in thirds, slide away and open again as visitors choose one to read.

    3d-transformspaper-fold
    Client Proof Sheet - A clients and logos section printed like a two-ink riso proof: a ruled sheet of client wordmarks where each marked case re-inks a live halftone photo and its story from the side you picked it
    section-028 Vault exclusive

    Client Proof Sheet

    A clients and logos section printed like a two-ink riso proof: a ruled sheet of client wordmarks where each marked case re-inks a live halftone photo and its story from the side you picked it.

    canvashalftone
    Starting Point Testimonials - Testimonials chosen by where each person started, told as a story you scroll through, with the same change of colour, headline type and photograph played by tabs or drag
    section-027 Vault exclusive

    Starting Point Testimonials

    Testimonials chosen by where each person started, told as a story you scroll through, with the same change of colour, headline type and photograph played by tabs or drag.

    SplitTextScrollTrigger
    Process Path - A how-we-work section where scrolling draws a path around an elliptical photo window, and each stage's photograph opens out of the point the path has just reached
    section-026 Vault exclusive

    Process Path

    A how-we-work section where scrolling draws a path around an elliptical photo window, and each stage's photograph opens out of the point the path has just reached.

    ScrollTrigger scroll-scrub
    Parting Word CTA - A closing call to action where the verb of each next step, set in giant wide capitals, parts around a photograph of what happens after the click
    section-023 Vault exclusive

    Parting Word CTA

    A closing call to action where the verb of each next step, set in giant wide capitals, parts around a photograph of what happens after the click.

    flip-reflowletter-morph
    Expanding Link Shelf - Five direct destination links with photographic panels or expressive typography
    section-021 Vault exclusive

    Expanding Link Shelf

    Five direct destination links with photographic panels or expressive typography. Hover and focus expand each route, and the last hovered route stays open.

    hover-expansionimage-navigation
    Studio Team Story - An editorial founder introduction where selecting a person changes the working story and reframes a shared studio photograph
    section-020 Vault exclusive

    Studio Team Story

    An editorial founder introduction where selecting a person changes the working story and reframes a shared studio photograph.

    editorial-layoutresponsive-section
    Team Through the Project - A single team photograph travels between six people as their individual stories enter view during the scroll, for team and about pages
    section-019 Vault exclusive

    Team Through the Project

    A single team photograph travels between six people as their individual stories enter view during the scroll, for team and about pages.

    ScrollTrigger scroll-storytelling
    Event Schedule - A practical two-day event programme with day selection, session filters and preparation notes, framed by a bold photographic event rail
    section-018 Vault exclusive

    Event Schedule

    A practical two-day event programme with day selection, session filters and preparation notes, framed by a bold photographic event rail.

    accessible-filteringstate-transition
    Searchable FAQ - A complete help section with searchable answers, topic filters, native disclosures and a clear route to a real person
    section-017 Vault exclusive

    Searchable FAQ

    A complete help section with searchable answers, topic filters, native disclosures and a clear route to a real person. Built around a warm editorial workspace example.

    click-togglestate-transition
    Pricing Comparison - A complete SaaS pricing section with three comparable plans, monthly and yearly billing, clear annual totals and a focused plan-selection handoff
    section-016 Vault exclusive

    Pricing Comparison

    A complete SaaS pricing section with three comparable plans, monthly and yearly billing, clear annual totals and a focused plan-selection handoff.

    state-transitionprogressive-enhancement
    Peel to Reveal Offer - A SaaS promotion section with one tactile peelable voucher, a revealed coupon code and a complete copy-to-redemption demonstration
    section-015 Vault exclusive

    Peel to Reveal Offer

    A SaaS promotion section with one tactile peelable voucher, a revealed coupon code and a complete copy-to-redemption demonstration.

    pointer-interactionclip-path
    Isometric Project Wall - An architectural photography portfolio section with a drifting isometric image wall, a stable six-project index, readable project summaries and a square-on image viewer
    section-014 Vault exclusive

    Isometric Project Wall

    An architectural photography portfolio section with a drifting isometric image wall, a stable six-project index, readable project summaries and a square-on image viewer.

    isometricinfinite-loop
    Service Pathway - A photographic service chooser that keeps three client situations, the active offer, practical fit and a clear next step together in one confident studio section
    section-013 Vault exclusive

    Service Pathway

    A photographic service chooser that keeps three client situations, the active offer, practical fit and a clear next step together in one confident studio section.

    accessible-tabsstate-transition
    Customer Proof Ledger - A photography-led customer story section pairing three clear customer choices with a large workplace image, illustrative result, quote and expandable working note
    section-012 Vault exclusive

    Customer Proof Ledger

    A photography-led customer story section pairing three clear customer choices with a large workplace image, illustrative result, quote and expandable working note.

    accessible-tabsgenerated-photography
    Transformation Stories - A photography-led transformation section with three room stories, a flexible before-and-after comparison and concise design notes beside the image
    section-011 Vault exclusive

    Transformation Stories

    A photography-led transformation section with three room stories, a flexible before-and-after comparison and concise design notes beside the image.

    accessible-tabsbefore-after
    Editorial Project Carousel - An art-book featured projects carousel with a dominant image stage, synchronized project facts and outcomes, visible folio progress, case-study links and complete keyboard, button and swipe navigation
    section-010 Vault exclusive

    Editorial Project Carousel

    An art-book featured projects carousel with a dominant image stage, synchronized project facts and outcomes, visible folio progress, case-study links and complete keyboard, button and swipe navigation.

    carouseldrag
    Spatial Product Range - A product-first range selector with generated speaker cutouts, a seamless spatial carousel and complete fallback product cards
    section-009 Vault exclusive

    Spatial Product Range

    A product-first range selector with generated speaker cutouts, a seamless spatial carousel and complete fallback product cards.

    webgl-shaderpointer-drag
    Time of Day Hero - A hero for a place that changes through the day: a giant photographic dial turns to the daypart on show, and the panel, headline and colour ground change with it
    section-008 Vault exclusive

    Time of Day Hero

    A hero for a place that changes through the day: a giant photographic dial turns to the daypart on show, and the panel, headline and colour ground change with it.

    state-transitionpointer-drag
    Alpine Stage Route Hero - A cycling hero with two selectable Alpine mountain sprints, original aerial landscapes and animated road-aligned routes
    section-007 Vault exclusive

    Alpine Stage Route Hero

    A cycling hero with two selectable Alpine mountain sprints, original aerial landscapes and animated road-aligned routes.

    svg-route-drawingcontainer-queries
    Colour Chapter Showcase - A photography-led editorial section whose entire canvas changes colour as you scroll between three generously composed chapters
    section-006 Vault exclusive

    Colour Chapter Showcase

    A photography-led editorial section whose entire canvas changes colour as you scroll between three generously composed chapters.

    ScrollTrigger scroll-colour
    Kinetic Type Hero - A playful studio hero where five oversized letter objects form a bold composition visitors can drag, nudge, shuffle and reset
    section-005 Vault exclusive

    Kinetic Type Hero

    A playful studio hero where five oversized letter objects form a bold composition visitors can drag, nudge, shuffle and reset.

    draggable-typographypointer-capture
    Photo Marquee Gallery - A complete photographic showcase with a bold editorial masthead and two edge-to-edge image rows travelling continuously in opposite directions, plus click-to-pause controls, a built-in photo lightbox and static browsing fallbacks
    section-004 Vault exclusive

    Photo Marquee Gallery

    A complete photographic showcase with a bold editorial masthead and two edge-to-edge image rows travelling continuously in opposite directions, plus click-to-pause controls, a built-in photo lightbox and static browsing fallbacks.

    infinite-marqueeopposing-direction
    Editorial Case Study - A photography-led architecture case study with an indexed focal image, project narrative, key facts and a measured outcomes ledger in one refined editorial section
    section-003 Vault exclusive

    Editorial Case Study

    A photography-led architecture case study with an indexed focal image, project narrative, key facts and a measured outcomes ledger in one refined editorial section.

    accessible-galleryclip-reveal
    Product Feature Story - An editorial product feature section where a numbered chapter rail changes the inspected photography, technical facts and substantial story together with a refined, interruptible transition
    section-002 Vault exclusive

    Product Feature Story

    An editorial product feature section where a numbered chapter rail changes the inspected photography, technical facts and substantial story together with a refined, interruptible transition.

    tabsstate-transition
    Image-led Hero - A composed editorial hero that lets one strong photograph carry the setting, while a large crossing headline, practical stay details and a direct booking action give it purpose
    section-001 Vault exclusive

    Image-led Hero

    A composed editorial hero that lets one strong photograph carry the setting, while a large crossing headline, practical stay details and a direct booking action give it purpose.

    image-led-layoutscoped-intro

    About website sections

    How is a website section different from an effect or a UI element?

    An effect provides an animation technique; a UI element provides a control such as tabs or a modal. A website section is a complete content composition: layout, typography, imagery and interaction together. A template supplies a whole website.

    How do I get the sections?

    While the collection is small, website sections are available only in the Vault for now, for both existing and new owners. They are not available to buy individually. Sign in with your Vault account to download the source.

    Can I change the design?

    Yes. Change text, links and images in the HTML, and use the documented CSS variables for colours, fonts and spacing. Some sections may include additional themes; the available choices are listed on each product. There is no shared theme system to install.

    Do sections need a framework or a build step?

    No. The downloads contain HTML, CSS and JavaScript, with the dependencies and setup documented. Add the section to an existing page or adapt it to your project. Each section documents its keyboard, mobile and reduced-motion behaviour.