# 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. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/timeline-order-of-service.html
Section: Timeline
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: group, heading, image, paragraph, separator
Keywords: wedding, order of service, order of the day, schedule, timeline, programme, ceremony

## Variations (2)

### Booklet (the default)

Identical markup in every theme.

The cover page inverted to your contrast colour with base type, the running page your base ground, one currentColor hairline round the booklet and short currentColor rules between the times.

### Vow

This variation states its own colours and states its own type: identical in every theme.

The Vow wedding set: a wisteria cover page and a card-white running page inside a wisteria hairline, peony times over Didot events, Nell & Sam in Didot with an italic ampersand and the dried-flowers photograph square.


---

## 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.

## 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.

## What to change first

1. **The times and events.** Duplicate a time group to add one; the first
   group has no rule above it.
2. **The names, date and place on the cover.**
3. **The photograph.**

## 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).