Contact offices: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/contact-offices.html Core Patterns (https://patternpaste.com/patterns/) Contact (https://patternpaste.com/patterns/contact/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - Replace each sample photo with its office or neighbourhood. Use the Image block's Replace control and update the descriptive alternative text. - Edit the city, time zone, address, hours and direct lines in each bay. - 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. - Link email addresses with mailto: and telephone numbers with tel: if they should be tappable. Edit or remove the shared delivery note. 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. Theme handoff ## What comes from where ### 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. ### Set by this pattern 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. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A photographic office directory. Matching 4:3 frames open four equal bays, followed by each city's time zone, address, hours and direct contact details. The photos are included examples, ready to replace with the buyer's own rooms. ### 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. Make it yoursVariations and the edits to make first ### 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 - Replace each sample photo with its office or neighbourhood. Use the Image block's Replace control and update the descriptive alternative text. - Edit the city, time zone, address, hours and direct lines in each bay. - 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. - Link email addresses with mailto: and telephone numbers with tel: if they should be tappable. Edit or remove the shared delivery note. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Contact offices: common questions Does Contact offices need a plugin? No. It is built only from core WordPress blocks (group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Contact offices match my theme? Choose by variation. Offices and Offices in pairs take your theme’s palette; Forest and apricot brings its own colours. How many variations does Contact offices have? 3: Offices, Forest and apricot and Offices in pairs. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Contact offices free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 16KB of core-block markup, 4 blocks (group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with FAQ Emergency triage list An emergency page section for a trade: a header with a legend of three verdict tags, then seven ruled rows sorted by urgency, each the problem as a card title, what to do now, and a verdict tag at the right: ring now, book it, or ring the gas line first. States no colour and no font of its own. (https://patternpaste.com/pattern/emergency-triage-list.html)Footer Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. One closing rule joins both parts to the useful and legal links below. The two fields stack in reading order on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-booking-fold.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Contact Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, heading, image, paragraph Presets color 5, spacing 5, font-size 3 WordPress 7.0+ Continue exploring ## Next in Contact Explore all 11 Contact patterns (https://patternpaste.com/patterns/contact/) Shot in Twenty Twenty-Five Contact No plugin needed ### Contact ledger A contact section with no form in it. Contact Preview pattern (https://patternpaste.com/pattern/contact-ledger.html) Shot in Twenty Twenty-Five Contact No plugin needed ### Contact place A contact section for one address you can walk to. Contact Preview pattern (https://patternpaste.com/pattern/contact-place.html) Shot in Twenty Twenty-Five Contact No plugin needed ### Contact split A contact section with no form in it: the left sixty per cent is almost empty, holding a tracked label, one display invitation and a single action, and the right forty per cent is packed, three stacked groups of address, hours and direct lines hanging off one vertical hairline. Contact Preview pattern (https://patternpaste.com/pattern/contact-split.html)