Menu dish anatomy

One signature dish photographed in the middle of the page with its parts labelled around it, like a diagram in a cookery book. It sits in the features section beside the menus: it sells one thing by explaining it.

The dish is the diagram. The photograph takes the middle column and the four parts sit two on each side, each a name and a short line on a hairline leader. The leader is the label's bottom border, and the label is padded on the side away from the photograph, so the rule runs right up to its edge; the right-hand labels sit lower than the left. Three columns and no positioning: on a phone the labels stack above and below the photograph.

1. The photograph. Your own signature dish, shot from above or the side.
2. The parts. Four names and four short lines.
3. The link. #menu.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text; the names try role-label and the leaders role-rule.
• Links. An underlined text link.

• The heading. The x-large rung.
• The photograph. A 4:5 crop in the middle 44%.

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.

• Core blocks only: group, columns, column, image, 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.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.