Contact split: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/contact-split.html Core Patterns (https://patternpaste.com/patterns/) Contact (https://patternpaste.com/patterns/contact/) Free Standard # 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. The seam between the two is the design, airy against dense across a single currentColor rule, and every line of detail is text a visitor can read and copy rather than a field they have to fill. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The invitation. "Start with a conversation." is one line on purpose; this ramp is built for four to six words and a long heading will take three lines out of the air that makes the left side work. - The button label and its link. It ships without a URL. - The three groups. They are Studio, Hours and Direct. - The detail lines. Each group is one paragraph with
between lines, so the lines stay locked together as a block of facts rather than drifting apart on your theme's paragraph spacing. - The balance. If your details are shorter than these, take the right column to 35% and give the left 65%; the seam holds. The signature moment ## Density contrast across one seam The signature is the seam. The left sixty per cent holds four things: a tracked label, one display line, one short paragraph on a 32rem measure, and one action. The right forty per cent holds fourteen lines of address, hours and direct contacts at body size, ruled into three groups. They are separated by a single 1px currentColor rule running down the inside edge of the right column, and the two halves are deliberately at opposite densities across it: the eye reads the invitation, crosses one hairline, and lands in a ledger. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your button shape. - Every rule. ### Set by this pattern - Full bleed with its own measure. - The 60/40 split. - The reading measure. - The display ramp. - Line-height as density. - Contrast. 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 contact section built as two unequal halves of one band: an invitation on the left with room around it, and everything a visitor actually needs to look up packed into a narrow column on the right. It is meant to sit low on a page, after the argument has been made and before the footer. ### The signature moment: density contrast across one seam The signature is the seam. The left sixty per cent holds four things: a tracked label, one display line, one short paragraph on a 32rem measure, and one action. The right forty per cent holds fourteen lines of address, hours and direct contacts at body size, ruled into three groups. They are separated by a single 1px currentColor rule running down the inside edge of the right column, and the two halves are deliberately at opposite densities across it: the eye reads the invitation, crosses one hairline, and lands in a ledger. That is a composition, not a decoration, which is why it survives having no colour of its own. Take the type away and the section is still a pale field against a packed one. Make it yoursVariations and the edits to make first ### The variation - Night split. The colour axis and nothing else: the whole section inverts to your contrast ground with your base on it, and the action inverts back so it stays a lit panel rather than dissolving into the band. The structure, the split and the copy are unchanged, and the seam still follows the type because it is currentColor. ### What to change first - The invitation. "Start with a conversation." is one line on purpose; this ramp is built for four to six words and a long heading will take three lines out of the air that makes the left side work. - The button label and its link. It ships without a URL. Set it, and make the label a verb. - The three groups. They are Studio, Hours and Direct. Rename them, or delete one: the rules are per-group borders, so removing a group takes its rule with it and the ledger closes up. - The detail lines. Each group is one paragraph with
between lines, so the lines stay locked together as a block of facts rather than drifting apart on your theme's paragraph spacing. Edit them in place. - The balance. If your details are shorter than these, take the right column to 35% and give the left 65%; the seam holds. Do not go past about 50/50, which is where the signature stops working. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. The pattern states no font family anywhere. Serif or sans, the invitation and the ledger are both set in yours. - Your colours. The ground asks for base and the type asks for contrast, which every stock block theme defines, and each chain ends on a colour WordPress itself guarantees, so nothing here can resolve to nothing. - Your spacing scale. The band's height and the ledger's row padding are spacing presets, so a generous theme scale gives a taller, looser section. - Your button shape. The action is a core button carrying your theme's button element styles, including whatever it does on hover and focus. - Every rule. The vertical seam and the two horizontal rules between the groups are currentColor, so they follow your text colour rather than asking for a colour of their own. ### What it decides for itself - Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, and it states its own top and bottom padding, so it does not depend on the section above or below it for air. - The 60/40 split. Not a near-half. The imbalance is the point; equal columns would turn the seam into a fold and the density contrast would go. - The reading measure. The paragraph under the heading is wrapped in a 32rem constrained group so it breaks at about 60 characters instead of running the full width of the column. - The display ramp. The invitation is a clamp() from 2.5rem to 4.25rem with negative tracking and a line-height just above 1, against labels at 0.8125rem with wide tracking and detail lines at 0.9375rem minimum. Nothing sits in between, which is what makes the two halves read as two densities. - Line-height as density. The ledger lines are set at 1.45 against the paragraph's 1.6. The right column is packed on purpose. - Contrast. All text is a contrast chain on a base chain (or the inverse in the variation), claimed at 4.5:1 for the ledger and the paragraph and at 3:1 only for the display invitation, which is genuinely large. Technical notesBlock mechanics, responsive behaviour and constraints ### A contact section without a form, and why No pattern in this catalogue ships a form, and this one is the section where that decision is most visible, so it is worth stating plainly. A form is behaviour: it needs a handler, a spam defence, a success state and a privacy notice, none of which can live in pasted block markup. A pattern that faked one would either carry a script, which cannot survive wp_kses or a buyer's optimisation plugin, or ship a set of styled inputs that post nowhere and look broken the first time someone presses the button. Both fail silently on the buyer's page, and this catalogue refuses silent failures. So the ask here is a core button and the facts around it are text. If you want a form, install the form plugin you already trust and drop its block into the left column under the heading: the column is a plain core/column, and the right half of the composition is unaffected. ### Notes - Core blocks only: group, columns, column, heading, paragraph, buttons, button. No plugin, nothing to keep updated. - The columns stack below 782px, which WordPress decides, not this pattern. At 390 the seam becomes a rule hanging down the left of the ledger and the section reads top to bottom: invitation, action, details. - The preview shows the pattern in one theme's palette. That is inheritance working, not a promise about the colours: your site resolves base and contrast from your own theme and from anything you have saved in the Styles panel. Questions ## Contact split: common questions Does Contact split need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Contact split match my theme? Choose by variation. Split and Night split take your theme’s palette; Bough, Folio, Ice and navy and Spur bring its own colours. How many variations does Contact split have? 6: Split, Bough, Folio, Ice and navy, Night split and Spur. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Contact split free? Yes. It is one of 64 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. Which WordPress version does it need? 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup 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/) ## Specifications Section Contact Access Free Plugin None, core blocks only Variations 6 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 5, spacing 5, font-size 2 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 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 travel routes A getting-here section for an event or venue on an inverted slab: the postcode at display size as the headline, then three ruled routes, each an origin, its journey time as a large figure and three numbered steps, a strip of practical notes on taxis, parking and the ride home, and a maps link. Contact Preview pattern (https://patternpaste.com/pattern/contact-travel-routes.html) Shot in Twenty Twenty-Five Contact No plugin needed ### Hours counterweight An opening-hours sign with a monumental opening time balanced by a smaller closing-time plate. Contact Preview pattern (https://patternpaste.com/pattern/hours-counterweight.html)