# Catering order steps

> Ordering catering for an office or a party in three steps, each led by its lead time as a large figure (48 hours, the day before, collect at 8) under a heavy rule, then a plate with the starting price and one button. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/catering-order-steps.html
Section: Features
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: button, buttons, column, columns, group, heading, paragraph
Keywords: catering, office lunch, party, platters, ordering, lead time

## Variations (2)

### Lead times (the default)

Identical markup in every theme.

Contrast rules over each step, the lead times at display size in your text colour, a role-plate price note with your theme’s button.

### Crumb

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

The Crumb café set: espresso rules and Georgia lead times on oat, terracotta labels and price, a milk price card and an espresso pill.


---

## The signature moment: ordering for an office or party: three steps with lead times ("48 hours", "the day before", "collect at 8") as the large figures, a short price note, one button

**The figures are the times to remember: 48 hours, the day before,
collect at 8.** Each step hangs from a heavy rule with a small label above
its lead time at display size, then what happens and a line of detail. The
steps are three columns on a laptop and a tablet and stack on a phone; a
plate at the foot gives the starting price on its own line and
one button.

## What it inherits from your theme

- **Typeface.** The base states no font family.
- **Palette.** Your `base` ground and `contrast` text and rules; labels try
  `role-label`, the price note `role-plate` on a `role-rule` hairline.
- **Buttons.** Your theme's button with a stated padding.

## What it decides for itself

- **The lead times.** Off the ladder on purpose: `clamp(2.5rem, 4.4vw, 4rem)`.
- **The step titles.** The `large` rung.

## What to change first

1. **The lead times.** Your notice, cut-off and collection times.
2. **The price.** Your starting price and delivery radius.
3. **The link.** `#catering`.

## The Crumb look

Part of the Crumb Pattern Set, one café's whole site in one design language:
oat ground `#f4ecdf`, espresso ink `#2b1d16`, muted cocoa `#5c4a3f`, milk
cards `#fbf7f0` on oat hairlines `#dccfbf`, terracotta `#b3462d` labels and
peach `#e8a27c` on the espresso slab. Headings are Georgia at 400, body,
labels and buttons Helvetica; buttons are espresso pills or underlined links,
cards and photographs rounded at 14px. 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, buttons, button. No plugin, nothing to keep updated.
- The root group sets headings and links to `currentColor`, so every heading,
  paragraph and link inherits the group's text colour in any theme; only
  role-bearing text (labels, rules, plates) carries its own chain.