# Timeline stair > Six dated entries that step across the page as they descend. Each entry is indented one step further right than the one above it and carries a currentColor top rule across its own width, so the run reads as a flight of treads and the indent itself measures how far through the history you have read. Nothing is numbered and no rail is drawn. On a phone the columns stack and the staircase flattens into a plain ruled list, which is the same history at one width. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/timeline-stair.html Section: Timeline 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 Keywords: timeline, history, stair, steps, indent, years, about ## Variations (2) ### Descending stair (the default) Identical markup in every theme. The entries walk from the left edge to well right of it, each on its own top rule, so the distance travelled across the page is the distance travelled through the years. The rules are currentColor and follow your text colour. ### Stair reversed Identical markup in every theme. The composition changes rather than the colour: the staircase runs the other way. The first entry sits furthest right and each one after it steps back toward the margin, so the history closes at the edge it should have opened at. The heading and lede stay left. It suits a section that ends by handing off to whatever follows it on the page. --- ## The signature moment: the indent IS the passage of time **The signature is that nothing counts the entries and nothing draws a rail: how far through the history you are is written in how far across the page the entry has walked.** Each entry is indented one step further right than the one above it, and each carries a `currentColor` top rule across its own width, so six consecutive rules of decreasing length stepping right read as a flight of treads. A reader who lands halfway down the section knows they are halfway through it before they have read a word, from the position of the tread alone. That is a structural mark carrying the whole composition, so the rule is `currentColor`: it cannot resolve to nothing, it follows the theme's text colour, and it inverts with the section if the section is recoloured. ### How a step is built, and why it is columns rather than margins Each entry is a `core/columns` of two children. The first is an **empty `core/column`** whose `width` is the indent for that step: `0%`, `8%`, `16%`, `24%`, `32%`, `40%`. The second takes the remainder and holds the entry: a group with `border-top: 1px solid currentColor`, then the year, the title and the copy. The empty column carries no content at all, which is what the editor itself writes for a column nobody has filled. Margins would have expressed the same indent and would have been worse in two ways. A margin on a child of a constrained layout beats the layout's own `margin-left: auto` and moves the block rather than insetting it, and a margin does not collapse on a phone. A column width does both correctly and is one attribute per step. The `blockGap` is `0` on both axes. On the horizontal axis that makes the indent exactly the spacer column's percentage rather than the percentage plus a gap; on the vertical axis it means the empty spacer contributes no height when the row stacks. The rhythm between entries is the entry group's own `padding-bottom`. ### What happens at 390 Core stacks columns below 782px, and this pattern lets it: `isStackedOnMobile` is left at its default, so the spacer column becomes a full-width block of zero height and drops out of the picture, and every entry takes the full measure. The staircase flattens into a plain stack of ruled entries, which is the correct reading of it on a phone: the indent needs room to be a signal, and at 390 there is no room, so the six `currentColor` rules do the separating on their own. The spacer leaves no visible gap because it has no content and the row's vertical `blockGap` is `0`. This is the opposite decision from `timeline-rail`, which sets `isStackedOnMobile: false` because its rail would break into six pieces if the row stacked. Here the rule is a tread per entry rather than one continuous line, so stacking loses the staircase and keeps the history. ### Holding the measure down the flight By the last step the content column is 60% of 1240px, which is still about 740px, and the copy would have run as a wall at the top of the section and a ribbon at the bottom. Each entry's paragraph therefore sits in a nested constrained group at `30rem` with `justifyContent: left`, so every entry reads at about the same measure whatever its step is. The measure is held with a nested group and never with `padding-right`, which on a direct child of a constrained band moves the block instead of narrowing it. ## Why it is a history and not a process Nothing is numbered, nothing is counted and nothing asks the reader to act. The years are real dates rather than positions in a sequence, which is also why they are plain paragraphs and not a `core/list`: an ordered list would renumber itself and would refuse a date. The steps are not stages of anything; they are only how far along the reader is. It is neither of the other two timelines. `timeline-rail` hangs six moments on one continuous hairline with the years in a column beside it. `timeline-decades` packs twenty single lines under four decade heads and has no rail at all. This one has no rail and no column of years: the indent replaces both, and it is the only one of the three whose structure is horizontal. ## What it inherits from your theme - **The typeface.** No font family is stated anywhere. - **Your colours.** `base` for the ground, `contrast` for the type, each ending on a colour WordPress guarantees. Every rule is `currentColor`. - **Your spacing scale.** The gap under each tread, the space between entries and the section's own padding are all spacing presets, so a theme with a generous scale gets an airier flight. ## What it decides for itself - **Full bleed with a 1240px measure.** - **The ramp.** Eight points of indent per step, six steps, ending at 40%. That is a step big enough to see at 1240 and small enough that the last entry still has a readable column. - **The tread.** A top border on the entry group, not a `core/separator`: Twenty Twenty-Four narrows any separator that is not `is-style-wide` to a centred stub, and a group border is a per-entry width by construction. - **The reading measure**, at 30rem, held constant while the column narrows. - **The year as a tracked mark under the rule** rather than a display number, so the tread and the date read as one object and the title keeps the weight. ## What to change first 1. **The six entries.** Duplicate a row to add one, then set its spacer column's `width` in the block's settings, which writes both the `{"width":"48%"}` attribute and the inline `flex-basis:48%`. The two content columns must add to 100% with it. 2. **The ramp itself.** Eight points per step is the default. A shallower ramp (four points) reads as a drift rather than a stair; a steeper one runs the last entry out of measure, which is what the 30rem group is protecting. 3. **The years.** Plain text, so `1948`, `Spring 1948` and `Winter 1948-49` all set without changing the layout, since nothing is column-bound. 4. **The entry copy.** One sentence that says what changed, two at most. Three turns the flight into a document. 5. **The direction.** Ship the base where the section opens a page, and `stair-descending` where it closes one: that variation starts at the right and walks back to the margin, so the reader is returned to the edge the next section starts from. ## Notes - Core blocks only. No plugin, no script, no separator, no image. - Every colour is a fallback chain ending on a guaranteed colour, and every rule is `currentColor`. - The first entry's spacer column is `0%`, so the structure of the first step is identical to every other step and the run can be reordered or reversed by changing widths alone. `stair-descending` is exactly that: the same six entries with the ramp read backwards.