Menu course columns

A restaurant or cafe menu set as three course columns. A tracked label, a display heading and a line of service times open the section; beneath them Starters, Mains and Puddings stand side by side, and a ruled foot carries a note about bread and service with your theme's own button.

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.

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.

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

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

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.