# Contact getting here

> A contact section for a place people visit: a wide photograph of the room, an address card lapping up over its lower corner with the hours, phone, email, a call button and a directions link, and beside it a ruled getting-here list for the bus, parking, step-free access and bikes. Example images included and replaceable in the editor. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/contact-getting-here.html
Section: Contact
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, image, paragraph
Keywords: contact, address, directions, parking, accessibility, café, shop

## Variations (3)

### Card over the room (the default)

Identical markup in every theme.

Your base ground and contrast text, the address card in role-plate with a contrast hairline, your theme’s button beside an underlined link, rules in role-rule.

### Crumb

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

The Crumb café set: oat ground, a milk address card on an oat hairline lapping the rounded photograph, a terracotta label, a pill call button and a text link, Georgia over Helvetica.

### Mend

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

The Mend physio set: clinical white ground, deep teal ink, a mint address card headed in apricot on a cyclist photograph, parking and bus notes, a teal 6px-corner button, all in Avenir Next.


---

## The signature moment: the address card sits on the room

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

## What it inherits from your theme

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

## What it decides for itself

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

## What to change first

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

## 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, 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.

## Included images

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](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.