Chapter rail: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/chapter-rail.html Core Patterns (https://patternpaste.com/patterns/) Editorial (https://patternpaste.com/patterns/editorial/) Catalogue access Standard # Chapter rail A chapter of a guide: a narrow rail on the left carries the chapter numeral at display size and a short contents list, and stays put while the prose on the right scrolls past it. The rail stacks above the text on a phone. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The numeral and the heading. They are a pair. - The contents list. One paragraph per chapter; make the current one bold and the rest regular. - The prose. Copy a paragraph to add one. - The sticky offset. If your theme has a fixed header, raise top in the rail group's Position panel to clear it. The signature moment ## The numeral in the rail A number set at up to 120px where a label is expected. The rail is 16rem wide and the first thing in it is 03 at clamp(4.5rem, 9vw, 7.5rem), weight 700, -0.06em, on a 0.85 line height, the largest glyphs in the editorial section, sitting beside a column of 17px prose. Under it, a rule, a 13px label and a four-line contents list with the current chapter in bold. The scale collision between the numeral and the list is the design; the rail staying in view while the chapter scrolls is the refinement. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - The rule. - Spacing rhythm. ### Set by this pattern - The rail - The numeral - The contents list - Sticky offset 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 ### Overview A chapter of a guide. A narrow rail on the left carries the chapter numeral at display size and a short contents list, and stays put while the prose on the right scrolls past it; on a phone the rail stacks above the text. core/group, core/columns, core/paragraph, core/heading and core/separator. ### The signature moment: the numeral in the rail A number set at up to 120px where a label is expected. The rail is 16rem wide and the first thing in it is 03 at clamp(4.5rem, 9vw, 7.5rem), weight 700, -0.06em, on a 0.85 line height, the largest glyphs in the editorial section, sitting beside a column of 17px prose. Under it, a rule, a 13px label and a four-line contents list with the current chapter in bold. The scale collision between the numeral and the list is the design; the rail staying in view while the chapter scrolls is the refinement. Make it yoursVariations and the edits to make first ### What you change first - The numeral and the heading. They are a pair. - The contents list. One paragraph per chapter; make the current one bold and the rest regular. Turn them into links if the chapters are pages. - The prose. Copy a paragraph to add one. The longer the chapter, the more the rail earns its stick. - The sticky offset. If your theme has a fixed header, raise top in the rail group's Position panel to clear it. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. None stated. The numeral was drawn to hold at -0.06em in a serif face and a sans one; in Cardo it is a folio, in Manrope a dial. - Palette. base ground, contrast text, two-rung chains. The numeral and the heading both carry their colour explicitly. - The rule. A core/separator stating no colour. - Spacing rhythm. Core spacing presets. ### What it decides for itself - The rail: 16rem; the gutter: 4rem; the measure: 36rem. - The numeral: clamp(4.5rem, 9vw, 7.5rem), weight 700, -0.06em, 0.85. - The contents list: max(0.9375rem, 15px) on 1.5, current entry bold. - Sticky offset: 2rem. ### Contrast Every pair is contrast on base. The numeral and the heading are large text at 3:1; the lede, prose, label and contents list are held to 4.5:1. The rule carries no text. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(4.5rem, 9vw, 7.5rem) Technical notesBlock mechanics, responsive behaviour and constraints ### The sticky rail, and why the section is complete without it The rail's contents are wrapped in a core/group carrying core's position support: {"position":{"type":"sticky","top":"2rem"}}. WordPress writes the is-position-sticky class into the saved markup and adds position: sticky; top: 2rem at render time, which is why the authored pattern.html carries the class and not the inline style: the editor's own save() emits no inline position, and markup that wrote one would be flagged invalid on paste (measured in the editor round-trip for this pattern). Sticky positioning works because the rail group sits inside a core/column, and core's columns stretch every column to the row's height; the group sticks within its column for as long as the prose column is taller. On a chapter of four paragraphs at 1280 that is a modest effect; on a real chapter it is the point. If the buyer's theme or a plugin disables the position support, the rail simply scrolls with the text, which is the complete design and not a broken one. Nothing in the section depends on the stick. ### How the widths work The band is 56rem: a 16rem rail, a 4rem gutter and a 36rem text column, each in rem. The prose is the same clamp(1.0625rem, 1.45vw, 1.25rem) on 1.75 that content-columns uses, 55 to 60 characters at full width. The lede under the heading is a step larger at clamp(1.125rem, 1.7vw, 1.375rem) on 1.55. ### What happens at 390 The columns stack. The rail comes first: the numeral floors at 72px, then the rule, then the contents list, then the chapter heading and prose. Sticky has no effect once stacked, because the rail's column is only as tall as the rail. The contents entries are plain paragraphs, not links, so there are no tap targets; if you make them links, each line already clears 44px of height. Questions ## Chapter rail: common questions Does Chapter rail need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will Chapter rail match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. Is Chapter rail free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? Requires a block theme on WordPress 7.0 to 7.1. 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. 8.0KB of core-block markup, 6 blocks (column, columns, group, heading, paragraph, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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. #### 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)Blog Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It reads your own posts, so the lead changes the moment you publish; the preview on this page shows sample posts from our demo site, not yours. States no colour and no font of its own. (https://patternpaste.com/pattern/post-featured-lead.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html) #### Before you paste Requires a block theme on WordPress 7.0 to 7.1. 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/) ## Specifications Section Editorial Access Subscription Plugin None, core blocks only Variations 1 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, paragraph, separator Presets color 5, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Editorial Explore all 13 Editorial patterns (https://patternpaste.com/patterns/editorial/) Shot in Twenty Twenty-Five Editorial No plugin needed ### Case study spread One project told in full on a dark slab: a label and a display headline, a large photograph with a smaller one lapping its lower corner and hanging below it, then three columns for the brief, what was done and what it became, the last closing on three big figures, and a client's line under a hairline. Editorial Preview pattern (https://patternpaste.com/pattern/case-study-spread.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Comments region The comment thread as a ruled record: a long rule under the count, then every comment opened by a currentColor hairline with the name tracked small against a plain date, the comment set at reading size, and the reply link tracked back down to the name's size. Editorial Preview pattern (https://patternpaste.com/pattern/comments-region.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Content columns A long-form editorial section held to a strict reading measure, with a narrow sidenote rail hanging outside it: each note sits under its own hairline beside the paragraph it annotates, and drops beneath that paragraph on a phone. Editorial Preview pattern (https://patternpaste.com/pattern/content-columns.html)