Services scrollspy index, Pattern Paste Canonical: https://patternpaste.com/pattern/services-scrollspy-index.html Interactive (https://patternpaste.com/interactive/) Scrollspy Rail (https://patternpaste.com/interactive/scrollspy-rail/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Services scrollspy index A text-led services section with a narrow numbered index beside five generous service chapters. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the five sections as a plain stack. States no colour and no font of its own. Start here ## What you change first - Replace each service heading and copy; the first heading becomes its index label. - Use List View to add, remove or reorder groups named Section. - Adjust rail width, reading line and progress in the standard block inspector. - Keep section titles at h3 when this follows an h2 masthead, or change both levels for its page context. The signature moment ## A numbered service index stays beside five substantial service chapters The narrow rail gives the service names a compact rhythm while the generous text column does the explaining. Five is enough to make location useful without turning the offer into an inventory. Theme handoff ## What comes from where ### From your theme It inherits every font and uses chained theme colours. Body text needs 4.5:1 contrast; the large heading needs 3:1. ### Set by this pattern It decides a padded full-width Group with a 1200px content ceiling, five detailed service chapters and a deliberately narrow 200px rail. The rail uses wide alignment within that constrained Group so a theme cannot pull it back through the page padding. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### The signature moment: A numbered service index stays beside five substantial service chapters The narrow rail gives the service names a compact rhythm while the generous text column does the explaining. Five is enough to make location useful without turning the offer into an inventory. ### Why this is not case-scrollspy-anatomy or handbook-scrollspy-directory This is the only text-led commercial index: no image cadence, no evidence table, and every section has similar editorial weight. Make it yoursVariations and the edits to make first ### What you change first - Replace each service heading and copy; the first heading becomes its index label. - Use List View to add, remove or reorder groups named Section. - Adjust rail width, reading line and progress in the standard block inspector. - Keep section titles at h3 when this follows an h2 masthead, or change both levels for its page context. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme It inherits every font and uses chained theme colours. Body text needs 4.5:1 contrast; the large heading needs 3:1. ### What it decides for itself It decides a padded full-width Group with a 1200px content ceiling, five detailed service chapters and a deliberately narrow 200px rail. The rail uses wide alignment within that constrained Group so a theme cannot pull it back through the page padding. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin The companion plugin marks the section at the reading line and fills the progress rule. Without it, the masthead and five groups remain a useful plain stack; reduced motion gets the same still navigation. 19KB of core-block markup, 8 blocks (button, buttons, group, heading, list, list-item, paragraph, patternpaste/scrollspy-rail), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Agency service pages - Consultancy capabilities - Detailed product services #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)How it works Steps cards Four photographic process cards with level tops and descending feet. Each plate carries a replaceable WordPress image, a tracked step label, a short title and one sentence. The grid stretches the cards while their bottom margins draw the stair, reflowing into pairs and then a single column as the page narrows. States no colour and no font of its own. (https://patternpaste.com/pattern/steps-cards.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-paste/). Requires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. How we test patterns (https://patternpaste.com/how-we-test/) #### What's inside Blocks button, buttons, group, heading, list, list-item, paragraph, patternpaste/scrollspy-rail Core only NO Chains 14, deepest 3 rungs currentColor no spacing 80 color black, contrast, role-label font-size large, medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Features (https://patternpaste.com/patterns/features/) Shot in Twenty Twenty-Five Single articles Single articles Needs plugin ### Handbook scrollspy directory A reference directory: twelve entries in a narrow reading column beside a wide, unnumbered index of their titles that stays in view and marks the entry being read. 6 blocks Open preview (https://patternpaste.com/pattern/handbook-scrollspy-directory.html) Shot in Twenty Twenty-Five Gallery Gallery Editorial Needs plugin ### Case stack panels Five case-study panels on a dark band: a short masthead, then five prints dealt over one another as you scroll, each one a photograph in a wide cinematic crop with its client, its year and one line of outcome on the plate beneath it. 7 blocks Open preview (https://patternpaste.com/pattern/case-stack-panels.html) Shot in Twenty Twenty-Five Pricing Pricing Compare Needs plugin ### Pricing stack tiers Four pricing cards built as plan sheets: a numbered header, a large price beside a compact feature ledger, and a ruled footer. 8 blocks Open preview (https://patternpaste.com/pattern/pricing-stack-tiers.html)