Handbook scrollspy directory

The rail is the bigger half of the idea. Its twelve titles are the table of contents a visitor scans first, wide enough that no label wraps at desktop, while each entry is three or four paragraphs in a measure kept to about 38rem. The reading line sits high (24%), so an entry is marked as soon as its title arrives, not halfway through it: a visitor jumping in from the index wants the entry marked on arrival, not a screen later.

Services is five long chapters of equal weight behind a narrow numbered rail: the rail is a quiet aid to a sales argument read in order. This is the inverse density. Twelve look-up entries nobody reads in order, a rail more than half again as wide carrying the labels as the primary navigation, no numbers because a handbook entry has no rank, and an early reading line because a visitor arrives at one entry from the index.

Case is a photo essay, image-led and paced by pictures. This carries no image at all; it is a look-up reference where the visitor arrives with one question, finds it in the index and leaves.

1. Replace the twelve entries; each title becomes its index label, so keep it short and specific.
2. Add, remove or reorder the groups named Section in List View; the index follows. Past about sixteen, split the page.
3. Set a Group's HTML anchor on any entry another page links to, so the link survives a renamed title.
4. Turn numbering on in the block inspector if your entries do have an order, such as steps of a policy.
5. Keep entry titles at h3 below the h2 masthead, or move both levels for the page around it.

Every font and every colour. It states no ground, so it sits on your page's own; headings and body chain to contrast, the eyebrow to role-label then contrast. Body copy needs 4.5:1, the large h2 3:1. Headings are on the theme's ladder (x-large for the h2, large for each entry title), because their job is hierarchy.

A padded full-width Group with a 1100px ceiling; a 320px rail and a 96px gap; entry copy capped at 38rem so a line stays readable even though the column could run wider; the masthead outside the block at 44rem; numbering off; a 24% reading line.

The companion plugin builds the index from the entry titles, marks the entry at the reading line and fills the progress rule. Without it, the masthead and twelve entries remain a plain stack of headings and paragraphs. Reduced motion keeps the index and its anchors, still, with no current-entry reaction.

On a phone (below 782px) the rail becomes a two-column index above the entries, six rows of 44px tap targets; keep titles to three or four words so none needs a third line.