Timeline order of service, Pattern Paste Canonical: https://patternpaste.com/pattern/timeline-order-of-service.html Core Patterns (https://patternpaste.com/patterns/) Timeline (https://patternpaste.com/patterns/timeline/) Catalogue access Standard # 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. The pages stack on a phone and the fold becomes a seam. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The times and events. Duplicate a time group to add one; the first group has no rule above it. - The names, date and place on the cover. - The photograph. The signature moment ## The day is an order-of-service booklet opened flat, a cover page and a running page meeting at the fold The fold is a change of ground, not a rule. The two pages are the two cells of a grid with no gap, each painting its own ground, so where they meet reads as the spine of a booklet. On a phone the grid stacks and the fold becomes a horizontal seam, which still reads as a page turn. The running page centres each time as a small tracked label over the event in a larger line, with a short centred rule between entries, and the ceremony carries the only line of instruction. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. ### Set by this pattern - The names. - The events. - The booklet. 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 The order of a wedding day, made as the printed order of service the guests pick up from their chairs. A cover page and a running page sit side by side inside one hairline, like a booklet opened flat. It sits in the timeline section beside about-day-in-hours (clock times at display size down a ruled, left-aligned column beside photos: here the time is small and the event large, centred, on a page), steps-ledger (column heads, printed schedule rows) and timeline-rail and timeline-axis (a rail). ### The signature moment: the day is an order-of-service booklet opened flat, a cover page and a running page meeting at the fold The fold is a change of ground, not a rule. The two pages are the two cells of a grid with no gap, each painting its own ground, so where they meet reads as the spine of a booklet. On a phone the grid stacks and the fold becomes a horizontal seam, which still reads as a page turn. The running page centres each time as a small tracked label over the event in a larger line, with a short centred rule between entries, and the ceremony carries the only line of instruction. Make it yoursVariations and the edits to make first ### What to change first - The times and events. Duplicate a time group to add one; the first group has no rule above it. - The names, date and place on the cover. - The photograph. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. The base states no font family. - Palette. The cover page is inverted, your contrast colour with base type; the running page is your base ground with contrast type. The hairline round the booklet and the short rules are currentColor. Labels on the cover page start at base; on the running page they are on the label role. ### What it decides for itself - The names. clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem), off the ladder: the cover page's size is its point. - The events. The large rung, as card titles. - The booklet. 1000px wide, the grid's minimumColumnWidth: 23rem, so two pages from a tablet up (never three) and stacked on a phone. Technical notesBlock mechanics, responsive behaviour and constraints ### The Vow look Part of the Vow Pattern Set, a couple's whole wedding website in one design language: wisteria white #f7f5fb ground, midnight #1f2240 ink, dusk #555a78 muted ink, card white #ffffff on a wisteria hairline #d9d3e6, peony #a8365a labels on light grounds and pale peony #f2b8c9 on the midnight slab. Names and headings are Didot at 400 with an italic ampersand; body, labels and buttons are Gill Sans. Buttons are square midnight rectangles or underlined peony links; cards and photographs are square. Every text pair is measured on the ground it is painted on. Take the base for your theme's colours, or the look's Use my theme chip. ### Notes - Core blocks only: group, heading, paragraph, image, separator. - The example photograph is from the WordPress.org Photo Directory (CC0). Questions ## Timeline order of service: common questions Does Timeline order of service need a plugin? No. It is built only from core WordPress blocks (group, heading, image, paragraph and separator), so it pastes into the block editor with nothing to install. Will Timeline order of service match my theme? Choose by variation. Booklet takes your theme’s palette; Vow brings its own colours. How many variations does Timeline order of service have? 2: Booklet and Vow. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Timeline order of service free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 21KB of core-block markup, 5 blocks (group, heading, image, paragraph, separator), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £119 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 ### £119 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £119 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. 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/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Timeline Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, heading, image, paragraph, separator Presets color 5, spacing 3, font-size 2 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 ### 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 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 ### 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)