Stat chapters numbers

Six numbers, each with the story behind it: the chapters run down the right, and on the left one card on your contrast colour holds the figure for the chapter you are reading, in display type, and swaps to the next as you reach it, wiping in along the direction of travel. No photographs anywhere: the frame holds a group named Frame, which is a card of type, and the chapters you are not reading fade back.

Nothing moves until you scroll. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the six chapters as a plain stack, each number above its own story. States no colour and no font of its own.

ThemePreview sizeMotion
As authoredColour
Twenty Twenty-Five·1280pxPlays best in its own window

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What you change first

  1. The numbers. Each card is a Frame group with a figure and a label inside it; edit both.
  2. The stories. A label, a title and two paragraphs a chapter.
  3. The card's shape. Every card takes the block's resting shape.
  4. The card's colour. It is your contrast with base ink; the inverse is the other honest choice.
  5. The band. Chapter length in the inspector, 720 here.
  6. The masthead and the hand-off row. Ordinary core blocks before and after the block.
  7. Motion. The inspector has the switch and the dials; the wipe and the drift are what put a figure down.
  8. The heading levels. The masthead is an h2 and every chapter title an h3.

The signature moment

A figure in display type that changes as you reach the story it belongs to

The frame does not have to hold a picture. This composite is the proof: each chapter's frame block is a core/group named Frame, a card on the ink holding a number at display size and a small label under it, and the block lifts those cards into the sticky frame exactly as it lifts photographs. The figure beside you is always the figure of the chapter you are in, and it arrives with the wipe and a short drift, a number sliding in under the last one. An annual report that is read rather than scanned.

Theme handoff

What comes from where

From your theme

  • Typeface.
  • Palette.
  • The measure.
  • The ladder.

Set by this pattern

  • Display type.
  • Six numbers.
  • The card's padding
  • The band, at 720
  • The masthead is outside the block

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

Six numbers, each with the story behind it. The chapters run down the right; on the left one card on your contrast colour holds the figure for the chapter you are reading, in display type, and swaps to the next as you reach it, wiping in along the direction of travel. There are no photographs anywhere: the frame holds a group named Frame, and the chapters you are not reading fade back. The block is patternpaste/chapters with the morph and the plate off, no overshoot, a short drift, the smear off, a band of 720 and the fade at 45.

The signature moment: a figure in display type that changes as you reach the story it belongs to

The frame does not have to hold a picture. This composite is the proof: each chapter's frame block is a core/group named Frame, a card on the ink holding a number at display size and a small label under it, and the block lifts those cards into the sticky frame exactly as it lifts photographs. The figure beside you is always the figure of the chapter you are in, and it arrives with the wipe and a short drift, a number sliding in under the last one. An annual report that is read rather than scanned.

Why this is not editorial-chapters-case, team-chapters-index or timeline-chapters-years

  • Nothing in the frame is a photograph. Every other chapters composite is picture-led in the frame. Here the frame holds type on a card, which the widened slot rule allows: an image, a cover, or a group named Frame.
  • The card is its own plate, so the block's plate is off: a mount around a card on the ink would be a frame around a frame.
  • The morph is off because every card is the same shape: the frame block is a group with no aspect ratio of its own, so the block gives every card the stylesheet's resting shape, 3:2, and there is nothing to morph between. A group CAN state an aspect ratio through the block's own dimensions control, and then the frame would change shape between figures; six figures in one shape read as one report.
  • No overshoot and a short drift. A number that bounces reads as a counter animation; 16px of drift is a card being put down.
  • The fade is 45, the case study's neighbourhood: a story of two paragraphs wants to be read alone, and on a light ground 45 is quiet without reading as disabled.
Make it yoursVariations and the edits to make first

What you change first

  1. The numbers. Each card is a Frame group with a figure and a label inside it; edit both. The group's name in List View is what tells the block it is the chapter's frame block, so keep it called Frame.
  2. The stories. A label, a title and two paragraphs a chapter. Add a number by duplicating a Chapter group; the grid follows.
  3. The card's shape. Every card takes the block's resting shape. To change it, set an aspect ratio on the Frame group in the block sidebar; set different ones and turn the morph on and the frame will change shape between figures.
  4. The card's colour. It is your contrast with base ink; the inverse is the other honest choice.
  5. The band. Chapter length in the inspector, 720 here.
  6. The masthead and the hand-off row. Ordinary core blocks before and after the block.
  7. Motion. The inspector has the switch and the dials; the wipe and the drift are what put a figure down.
  8. The heading levels. The masthead is an h2 and every chapter title an h3. If this lands under another h2, or the page has no h1, change the masthead's level in the block toolbar.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • Typeface. Nothing states a family; the figures are set in your display face at display size, so a serif theme sets serif figures.
  • Palette. The band is your base with your contrast as ink; the card is the inverse, your contrast with your base as ink, the one pair every block theme keeps legible; the two labels lead on role-label; the button is your theme's outline style.
  • The measure. Each chapter's prose is a constrained group with no width of its own.
  • The ladder. The masthead is x-large, every chapter title large, every paragraph medium.

What it decides for itself

  • Display type. The figures are a bare clamp(3.5rem, 9vw, 7.5rem) paragraph at weight 600, line-height 1 and letter-spacing -0.03em, centred in the card: a stat figure whose size IS the composition. The label under each is uppercase, tracked at 0.12em, at a 15px floor.
  • Six numbers. Enough to make a year and few enough to read; the copy is a small food business's and every figure is one you replace.
  • The card's padding is a clamp() on every side, because a card is a cell and a cell's horizontal padding is never a spacing preset.
  • The band, at 720, a floor the two paragraphs nearly reach.
  • The masthead is outside the block and the hand-off row is a sibling after it, both inset by the block's gutter.
Technical notesBlock mechanics, responsive behaviour and constraints

What needs the plugin

This pattern embeds patternpaste/chapters, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor.

  • With the plugin and motion off (the inspector switch, and also what the storefront's still picture and the contact sheet show): the two-column spread, every card in the left rail beside its own story.
  • With the plugin deactivated entirely: the masthead is followed by the six chapters as a plain stack of core blocks, each card above its own story, and then the hand-off row.
  • A reader who has asked for reduced motion gets the still spread.
  • On a phone there is one column and the same stack, with the plugin, without it and with motion off.

What is not proved

  • The judge reads the card as a picture. chapters-wrong-picture and its siblings ask which figure is painted, and a Frame group is a figure like any other; nothing reads that the number in it is the right number, which is the author's copy and not the block's.
  • A card with no image has no natural shape, so chapters-aspect-off is skipped with the morph off, as it is on the case study, and reported.
  • The wide cell. At 1920 the card is capped at the frame's height times 3:2 and sits at the outer edge of a wider track, as the timeline's prints do; it reads as a margin and is not measured.

The markup

34KB of core-block markup, 6 blocks (button, buttons, group, heading, paragraph, patternpaste/chapters), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Start free trial to copyWhat you copy is yours forever. Cancel whenever.

Back to the library