# Timeline ahead > A timeline that runs forward: six dated entries hung on one continuous currentColor hairline, three of them behind and three still to come, with the current entry set on an inverted plate so the reader can see at a glance where the work stands. The entries ahead carry the same rule and shorter copy, so the section visibly thins out toward the future. It is a history with an open end rather than a process: nothing is numbered and nothing asks the reader to act. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/timeline-ahead.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, roadmap, milestones, future, progress, you are here, plan ## Variations (2) ### You are here (the default) Identical markup in every theme. One entry is inverted, a dark plate in an otherwise quiet run, and that inversion is the whole legend: no dot, no badge, no icon to say which milestone is current. Inversion is the one colour move every theme can honour, so the mark arrives in yours exactly as it does here. The years hold beside their entries at every width, so the rail is unbroken on a phone. ### Open road Identical markup in every theme. The same idea made with structure instead of inversion. Nothing is recoloured; the rule simply stops at the current entry, and the entries beyond it hang off nothing at all, so the line runs out and the future is unruled. Reach for it where a dark plate would be too loud for the page around it. --- ## The signature moment: one entry inverted is the "you are here" mark **The signature is that the current entry, and only the current entry, is a plate with a `contrast` ground and `base` type, in a section where everything else sits plainly on `base`.** A roadmap normally needs a legend to say which milestone is current: a dot on the rail, a coloured badge, a "now" label with a key underneath it. This one says it with the single loud object in an otherwise quiet run, and the reader needs nothing explained to them. That is a portability argument, not a decoration. `base` and `contrast` are the only colour slugs the stock block themes share, so **inversion is the one colour move that always arrives**: an accent plate would be pale pink in one theme and saturated purple in another, and a tinted plate on `base-2` resolves to plain white in both stock themes, which is a mark nobody can see. A plate that swaps the section's two guaranteed colours is as legible in the buyer's theme as it is in the preview, and it inverts with them if they recolour either one. The plate states **both** halves of its pair, ground and type, and its heading states its own `base`-chain colour a second time, because a theme's heading element style beats a colour inherited from a wrapping group. That is the mechanism that renders a headline the same colour as the band it sits on, and on an inverted plate it is the difference between the loud entry and an entry with a hole in it. ### The second beat: the section thins out toward the future The entries ahead get the same hairline, the same year column and the same heading size as the entries behind, and shorter copy: two full sentences for 2025, eleven words for 2027, seven for 2028. Nothing is greyed out, nothing is dashed, no colour is spent on it. The future simply has less to say about itself, and the shape of the section says so. ### How the rail is built, and why it is unbroken There is no separator block and no rail element. Each entry is a two-column row whose right-hand column holds a group with a `border-left` in `currentColor`, and consecutive rows carry no vertical gap, so those borders touch and form one line. The entries' own top and bottom padding spaces the content, not the gap between rows. This is the technique `timeline-rail` established; adding or removing an entry cannot break the line. The rule is `currentColor` throughout, so it follows the theme's text colour and cannot resolve to nothing. On the inverted row the rule is on the entry group outside the plate, so it stays `contrast`-coloured and the line runs straight through the loudest part of the section rather than around it. **The columns do not stack.** `isStackedOnMobile: false` keeps the year beside its entry at 390, which is the measured way to beat core's `flex-basis: 100% !important`. The year column is 16%, about 56px at 390, which holds four digits at the `clamp()` floor of 18px. ## How it differs from the other timelines `timeline-rail` is a closed history: six moments that have happened, on a rule that runs past both ends to say the record is a length of something longer. `timeline-decades` is twenty single lines under four decade heads, with no rail at all. **This one is the only timeline in the catalogue with a present tense.** Half its entries have not happened, one of them is happening, and the section is built around saying which is which. At thumbnail size it is the timeline with a dark block in the middle of it. It is still a timeline and not a process. Nothing is numbered, nothing is a stage, and nothing asks the reader to start: the years are real dates, which is why they are plain paragraphs and not a `core/list`. ## What it inherits from your theme - **The typeface.** No font family is stated anywhere. - **Your colours.** `base` for the section ground, `contrast` for the type, and the two swapped for the current entry's plate. Both chains end on a colour WordPress guarantees, so neither can blank. The rail is `currentColor`. - **Your spacing scale.** Every gap, including the rail's run-past at both ends and the plate's own padding, is a spacing preset. ## What it decides for itself - **Full bleed with a 1240px measure.** - **The 16/84 split** and the right-aligned year, so the years form a hard edge down the section against the rule. - **Which entry is inverted.** One, and only one. Two plates make a colour scheme; one plate is a position. - **The reading measure.** Every entry paragraph sits in a nested constrained group at 34rem, about 65 characters, inside the plate as well as outside it. - **The alignment of the year to its entry.** The year's `margin-top` matches its entry group's `padding-top`, so on the inverted row the year lines up with the top edge of the plate. ## Contrast Both pairs are the guaranteed pair and its inverse: `contrast` type on a `base` ground for the section, `base` type on a `contrast` ground for the plate. Every piece of type in the section is held to 4.5:1 rather than the large-text 3:1, including the 2rem-and-up section heading, so no claim here depends on a size. ## What to change first 1. **Which entry is current.** Move the plate. It is the whole mechanism, and it is one group: the inverted entry's copy sits inside an extra `core/group` carrying the `contrast` ground and the `base` text, with the heading and the paragraph stating `base` themselves. Copy that group onto another entry and unwrap it from this one, and remember to move the two colour statements on the heading and paragraph with it. 2. **The entries and the years.** Duplicate a row to add one. The first row carries the larger top padding and the last row the larger bottom padding: those two values are the rail's run-past and belong to whichever rows are first and last. 3. **The copy ahead.** Written as intentions and deliberately short. Keep it that way; a future entry with as much detail as a past one reads as a promise rather than a plan. 4. **The lede.** It says the plate is where the work stands today. If you stop using the plate that way, change the sentence with it. 5. **The finish.** Ship the base where the current position should be the loudest thing on the page, and `ahead-open` where a dark plate would shout over the sections around it. ## The variation **`ahead-open`, "Open road".** One axis, composition, and no colour move at all: the plate is gone and the current position is marked structurally instead. The `border-left` stops at the current entry, which takes the run-past padding at its foot, and the two entries beyond it keep the same column and the same left padding while hanging off nothing. The rule literally runs out, and the future is unruled. Same six entries, same years, same headings; only the lede's second clause changes, because it named the plate and there is no plate to name. ## Notes - Core blocks only. No plugin, no script, no separator, no image. - Every colour is a fallback chain ending on a colour WordPress guarantees, and every rule is `currentColor`. - The rail is a border on a group inside a column, not on the column itself, so it does not depend on `core/column` border support. - The plate's ground and the rail's colour are set on different groups on purpose: a background and a border on one group is a serialisation this catalogue has no measured example of, and separating them keeps both to shapes that already ship.