Timeline ahead: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-ahead.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - Which entry is current. Move the plate. - The entries and the years. Duplicate a row to add one. - The copy ahead. Written as intentions and deliberately short. - The lede. It says the plate is where the work stands today. - 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 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed with a 1240px measure. - The 16/84 split - Which entry is inverted. - The reading measure. - The alignment of the year to its entry. 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 A timeline that runs forward. Six dated entries on one continuous hairline: three behind, one where the work stands today, two still to come. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph. ### 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. Make it yoursVariations and the edits to make first ### What to change first - 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. - 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. - 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. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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. Questions ## Timeline ahead: common questions Does Timeline ahead need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Timeline ahead match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Timeline ahead have? 2: You are here and Open road. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Timeline ahead free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 20KB of core-block markup, 5 blocks (column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Team About day in hours An about-us story told as the business’s working day: an intro, two photographs and one action on the left, and on the right a ruled run of clock times, each time set large beside a short title and a line about what happens then. Example images included and replaceable in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/about-day-in-hours.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Timeline Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, paragraph Presets color 5, spacing 6, font-size 3 WordPress 7.0+ Continue exploring ## Next in Timeline Explore all 20 Timeline patterns (https://patternpaste.com/patterns/timeline/) Shot in Twenty Twenty-Five Timeline No plugin needed ### Season calendar strip The year as one strip of twelve month cells, each naming the work that suits it: winter months inverted, the nesting months marked with a heavy top rule, autumn months set apart, and a three-part key beneath saying why. Timeline Preview pattern (https://patternpaste.com/pattern/season-calendar-strip.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline archive A history set as a contact sheet: eight square photographs four across in two tight rows, each filed under a currentColor hairline with the date in wide-tracked caps and three or four words of title. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-archive.html) Shot in Twenty Twenty-Five Timeline No plugin needed ### Timeline axis Five eras of one observatory hung across the page rather than down it. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-axis.html)