WordPress timeline patterns, Pattern Paste Canonical: https://patternpaste.com/patterns/timeline/ 27 layout options 11 Styled looks No plugin needed # WordPress timeline patterns Add a WordPress timeline section with block patterns: dated milestones down a rule, for a history, a roadmap or a company story. 38 layout options shown Showing 1–38 of 38 Sort by Per page Lightbox Pattern page Live preview at its actual size. Scroll to explore the whole section. Explore pattern (https://patternpaste.com/patterns/) Shot in Twenty Twenty-Five Team No plugin needed ## 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. Team Preview pattern (https://patternpaste.com/pattern/about-day-in-hours.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Availability calendar The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark. Timeline Preview pattern (https://patternpaste.com/pattern/availability-calendar.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Course plan taper A typical course of treatment drawn as eight weeks on a ruled baseline: a solid bar for each clinic session, its height set by its minutes, and a short rule for each week of exercises at home, so the sessions visibly shorten and spread out as the course goes on. Timeline Preview pattern (https://patternpaste.com/pattern/course-plan-taper.html) Shot in Twenty Twenty-Five How it works No plugin needed ## First visit to scale What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button. How it works Preview pattern (https://patternpaste.com/pattern/first-visit-to-scale.html) 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 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. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-ahead.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) Shot in Twenty Twenty-Five Timeline No plugin needed ## The spread as chapters Three eras as three chapters, each one a wide 21:9 photograph with its type filed beneath it: the date range at display size on the left, the title and a paragraph of copy on the right. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-chapters.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline on a cover A whole history laid over one full-bleed photograph. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-cover.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## On the veil The composition changes rather than the colour: the plate is removed and the record is set straight onto the photograph, at a wider measure and a larger heading. Variation of Timeline on a cover Preview pattern (https://patternpaste.com/pattern/timeline-cover.html#variant=cover-veil-record) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline cover years A full-bleed cover under a heavy veil of your theme's contrast colour: a display headline in the lower left and, down the right side, a rail of six years, each a large year figure and one event line, joined by a vertical rule with a hairline branching off at every year. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-cover-years.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline crossing Six dated entries alternating across one continuous currentColor rule down the centre of the section: the first hangs left of the line and is set against it, the second hangs right, and so on. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-crossing.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Crossed plates The composition changes rather than the colour: each entry becomes a bordered plate rather than bare copy, so the same unbroken rule now threads between six panels instead of running beside six blocks of text. Variation of Timeline crossing Preview pattern (https://patternpaste.com/pattern/timeline-crossing.html#variant=crossing-plates) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline decades A long history set as a record: four decade heads, each opened by a 2px currentColor rule and carrying five dated single-line entries under it, twenty in all. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-decades.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Eras across A long history read across the page rather than down it: four era columns side by side, each opened by a 2px currentColor rule with its decade at display size, a tracked note under it and five dated single-line entries below that, twenty in all. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-eras.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline frames An image-led history: four dated milestones, each a portrait photograph cropped to 4:5 with its date and title on a slab beneath it, under a currentColor hairline that butts the frame. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-frames.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Frames with a ledger The composition changes rather than the colour: the four staggered frames are unchanged, and a full-width ruled row is added beneath them listing the same four dates with a short note for each. Variation of Timeline frames Preview pattern (https://patternpaste.com/pattern/timeline-frames.html#variant=frames-ledger) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline numerals Five dated entries and no rule anywhere. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-numerals.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline order of service The order of the day as an order-of-service booklet opened flat: a cover page with the names, the date, a small photograph and the place meets a running page at the fold, where each time is a small tracked label over the event in a larger line, centred and divided by short rules. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-order-of-service.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline parallel Two histories run down the page together and are compared row by row: one track is the organisation itself, the other is the wider field it worked in, and a shared year sits between them. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-parallel.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## One rail, two tracks The composition changes rather than the colour: the two hairlines collapse into one spine near the centre with the years hung on it, and the tracks lose their own rails. Variation of Timeline parallel Preview pattern (https://patternpaste.com/pattern/timeline-parallel.html#variant=parallel-single-rail) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline rail Six dated milestones hung on one continuous currentColor hairline: the year in a narrow column set against the rule, the event title and one short paragraph on the other side of it. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-rail.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline spread Three eras, each given a whole editorial spread: a photograph on one side and, on the other, the date range set at display size with a title and a paragraph of copy under it. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-spread.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Timeline stair Six dated entries that step across the page as they descend. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-stair.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## The archive as a strip A history taken in one pass: eight narrow 2:3 photographs in a single row across the whole measure, set hard against each other, each filed under a currentColor hairline with its date in wide-tracked capitals and nothing else. Timeline Preview pattern (https://patternpaste.com/pattern/timeline-strip.html) Shot in Twenty Twenty-Five How it works No plugin needed ## TPO permission steps A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line. How it works Preview pattern (https://patternpaste.com/pattern/tpo-permission-steps.html) Team Own palette ## Crumb , About day in hours (https://patternpaste.com/pattern/about-day-in-hours.html#variant=crumb) About day in hours Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/about-day-in-hours.html#variant=crumb)Crumb set: whole pages (https://patternpaste.com/sets/crumb/) Timeline Own palette ## Folio , Availability calendar (https://patternpaste.com/pattern/availability-calendar.html#variant=folio) Availability calendar Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/availability-calendar.html#variant=folio)Folio set: whole pages (https://patternpaste.com/sets/folio/) Timeline Own palette ## Mend , Course plan taper (https://patternpaste.com/pattern/course-plan-taper.html#variant=mend) Course plan taper Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/course-plan-taper.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) How it works Own palette ## Mend , First visit to scale (https://patternpaste.com/pattern/first-visit-to-scale.html#variant=mend) First visit to scale Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/first-visit-to-scale.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) Timeline Own palette ## Bough , Season calendar strip (https://patternpaste.com/pattern/season-calendar-strip.html#variant=bough) Season calendar strip Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/season-calendar-strip.html#variant=bough)Bough set: whole pages (https://patternpaste.com/sets/bough/) Timeline Own palette ## Plum and blush , Timeline cover years (https://patternpaste.com/pattern/timeline-cover-years.html#variant=plum-and-blush) Timeline cover years Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/timeline-cover-years.html#variant=plum-and-blush) Timeline Own palette ## Midnight and lime , Timeline decades (https://patternpaste.com/pattern/timeline-decades.html#variant=midnight-and-lime) Timeline decades Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/timeline-decades.html#variant=midnight-and-lime) Timeline Own palette ## Forest and apricot , Eras across (https://patternpaste.com/pattern/timeline-eras.html#variant=forest-and-apricot) Eras across Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/timeline-eras.html#variant=forest-and-apricot) Timeline Own palette ## Ink and vermilion , Timeline numerals (https://patternpaste.com/pattern/timeline-numerals.html#variant=ink-and-vermilion) Timeline numerals Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/timeline-numerals.html#variant=ink-and-vermilion) Timeline Own palette ## Vow , Timeline order of service (https://patternpaste.com/pattern/timeline-order-of-service.html#variant=vow) Timeline order of service Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/timeline-order-of-service.html#variant=vow)Vow set: whole pages (https://patternpaste.com/sets/vow/) How it works Own palette ## Bough , TPO permission steps (https://patternpaste.com/pattern/tpo-permission-steps.html#variant=bough) TPO permission steps Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/tpo-permission-steps.html#variant=bough)Bough set: whole pages (https://patternpaste.com/sets/bough/) ## Choose a layout for your page Keep each entry to a date, a title and a line. A timeline is a history; use a process pattern when the reader has to act in order. New to patterns? Learn how to copy and paste a pattern (https://patternpaste.com/how-it-works/). Read how we test patterns (https://patternpaste.com/how-we-test/). All Core Patterns (https://patternpaste.com/patterns/)