# Menu course columns

> A restaurant menu in three course columns. A display heading and a line of service times sit over Starters, Mains and Puddings, each course under a heavy rule with its number at the right; every dish is a name and its price on one line with a dotted leader running between them, and a one-line description beneath at body size. The columns fall to two and then one as the screen narrows, and the leader still holds at a phone's width. A ruled foot carries a note and your theme's own button. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/menu-course-columns.html
Section: Listings
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, group, heading, paragraph
Keywords: menu, restaurant, bistro, cafe, courses, dishes, prices, food

## Variations (2)

### Course columns (the default)

Identical markup in every theme.

Your base ground with your contrast on it: a 3px rule over each course, a dotted currentColor leader from each dish to its price, and your theme's filled button in the foot.

### Butter and oxblood

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

A bistro look: states butter yellow, near-black type and oxblood prices and labels, with italic Big Caslon course headings over Futura descriptions and a square oxblood Book a table button.


---

## The signature moment: the price hangs on a dotted leader

**Every dish runs to its price along a dotted line, the way a printed menu
does it.** Each dish is one flex row that never wraps: the name at the left,
the price at the right and an empty group between them that grows to fill the
gap and carries a 2px dotted `currentColor` bottom border. The eye travels
the leader from name to price, and the prices line up down the right edge of
each column. Over each course a heavy 3px rule and a course number at the
right give the three columns a structural mark that holds in greyscale.

Dish names and prices are the second mass on the section, a bare
`clamp(1.125rem, 1.35vw, 1.375rem)`, and the descriptions under them are body
size, so the menu reads without leaning in.

## What it inherits from your theme

- The ground is `base` and every line of type is `contrast`, each a two-rung
  chain, at 4.5:1 or better in the stock themes.
- The course rules and the dotted leaders are `currentColor`.
- The label and the course numbers start on `role-label` and fall through to
  `contrast`.
- The heading is off the type ladder on purpose, a bare
  `clamp(3rem, 6vw, 7rem)`: its size is the composition. Course headings
  sit on the ladder at `x-large`, descriptions and notes at `medium`.
- The button is your theme's own filled button; the typeface is your theme's.

## What it decides for itself

- The courses are a grid with a 19rem minimum column: three columns at 1280
  and wider, two at 820, one on a phone.
- The dish row is `nowrap` with `space-between`. On a phone a long name wraps
  to two lines, the leader shortens and the price stays on the right.

## The Styled look

`butter-and-oxblood` is a bistro: butter yellow `#f6e7b8`, near-black
`#1f1a14` type (14:1) and oxblood `#7a1f2b` prices, labels and button (8.3:1),
with italic Big Caslon display and course headings over Futura descriptions.

## What to change first

The dishes and prices, the service times and address in the opening line,
and the note in the foot. Add or remove a dish by duplicating its row group;
the leader comes with it.