Contact getting here

A contact section for a place people come to: a wide photograph of the room, an address card lapping up over its lower corner, and beside the card a ruled list of the four questions visitors ask before they set off. It sits in the contact section beside contact-place, whose frame breaks the page: here the card sits on the picture and the directions are the content.

The card with the address, hours, phone and a call button laps up over the foot of a wide photograph of the room, and the getting-here list starts below the photograph beside it. The card alone carries the negative top margin, inside a column of a block that is the second child of a vertical flex group, so it paints over the photograph and the lap never collapses; the list column starts clear of the picture. On a phone the card laps the photograph and the list follows it.

1. The address, hours, phone and email. Keep the email short; a long one breaks inside the card on a phone.
2. The call link. tel:01632960014 is a reserved example number.
3. The photograph. Select it and choose Replace.

• Typeface. The base states no font family.
• Palette. Your base ground and contrast text. The card tries role-plate and role-plate-text with a role-rule hairline; the list's rules try role-rule; all fall back to base and contrast.
• Buttons. Your theme's button with a stated padding, beside an underlined link in the text colour.

• The address. Set at clamp(1.75rem, 2.8vw, 2.5rem) as the card's h2, off the ladder so it fits the card.
• The list. A grid of 15rem minimum columns, two across beside the card, one on a phone.

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, heading, paragraph, image, 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.