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.
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.
baseground,contrasttext, two-rung chains. The numeral and the heading both carry their colour explicitly. - The rule. A
core/separatorstating 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.
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
topin the rail group's Position panel to clear it.
The sticky rail, and why the section is complete without it165 words
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 work53 words
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 39068 words
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.
Contrast32 words
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 type18 words
Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(4.5rem, 9vw, 7.5rem)
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…