# Contact offices

> Four equal office bays hang from one continuous currentColor hairline, each opened by a replaceable WordPress photograph above its city, time zone, address, hours and direct lines. The grid reflows into pairs on a tablet and a single column on a phone. A closing rule holds the shared delivery note. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/contact-offices.html
Section: Contact
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. 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: group, heading, image, paragraph
Keywords: contact, offices, locations, addresses, hours, studios

## Variations (3)

### Offices (the default)

Identical markup in every theme.

Four photographic office bays with matching crops and equal weight, under a continuous rule. The grid becomes pairs as the available width narrows, then one office per row.

### Forest and apricot

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

States warm paper, forest green type, apricot details and Georgia headings across the four offices.

### Offices in pairs

Identical markup in every theme.

The same four photographs and offices in two rows of two, with larger city names and more space around the facts. Each office reads as a statement rather than a narrow directory entry.


---

## The signature moment: the same shape, four times, under one unbroken rule

Every bay has the same image crop and content order. Adjacent top borders meet
because the grid has no horizontal gap; padding inside each bay separates the
pictures and facts. One closing rule holds the shared delivery note. No office
gets greater weight than another.

## What it inherits from your theme

Typeface, heading sizes, base and contrast colours, and vertical spacing presets.
Rules use `currentColor`. Heading sizes have clamp fallbacks; the narrow address
and contact lines keep their own reading-size clamp.

## What it decides for itself

The full-width band has a 1240px inner measure. A grid with 16rem minimum tracks
keeps four offices across when they fit, pairs at tablet widths, and a single
column on a phone. Each bay keeps its own top border when the grid reflows.
Horizontal padding is fluid. The photo fills the bay's content width at 4:3,
with cover cropping and a consistent gap before the city name.

## The variation

**Offices in pairs** gives the same four images and offices two rows of two,
with larger city names. Its core columns stack below 782px. The photos remain
4:3, so the bigger frames give each office more presence.

**Forest and apricot** keeps the four bays on warm paper, with forest text, apricot details and Georgia city names.

## What to change first

1. Replace each sample photo with its office or neighbourhood. Use the Image
   block's Replace control and update the descriptive alternative text.
2. Edit the city, time zone, address, hours and direct lines in each bay.
3. Duplicate or delete a bay as needed. The base grid fits the available space;
   the paired variation uses columns that can be edited in List View.
4. Link email addresses with `mailto:` and telephone numbers with `tel:` if
   they should be tappable. Edit or remove the shared delivery note.

## Included images and core blocks

The photographs come from the reviewed WordPress collection in
`assets/wordpress-images.json`. Their public HTTPS URLs travel in the copied
Image blocks without source attachment IDs. The preview and pasted section use
the same photos. These are illustrative workspace details, not photographs of
the fictional addresses in the sample copy.

Core group, image, heading and paragraph blocks make the base. The paired
variation also uses columns and a spacer. No plugin, custom CSS or JavaScript.
Text sits on the theme's ground, never on the photos.

## Contrast and display type

Headings qualify as large text at 3:1; address lines, contact details and labels
are held to 4.5:1. Colour chains end in WordPress's guaranteed base colours.
Address and contact lines use `clamp(0.9375rem, 1vw, 1rem)` so compact office
bays remain readable without the theme's medium size overwhelming the measure.