# 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. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/chapter-rail.html
Section: Editorial
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: column, columns, group, heading, paragraph, separator
Keywords: editorial, guide, chapter, contents, rail, sticky, numeral, long-form

Promise: Identical markup in every theme.

---

## 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.

## 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.

## 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.

## What you change first

1. **The numeral and the heading.** They are a pair.
2. **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.
3. **The prose.** Copy a paragraph to add one. The longer the chapter, the
   more the rail earns its stick.
4. **The sticky offset.** If your theme has a fixed header, raise `top` in the
   rail group's Position panel to clear it.

## 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)