Pattern Paste
Subscribe

Core Patterns Contact

FreeStandard

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

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. 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.
  2. The button label and its link. It ships without a URL.
  3. The three groups. They are Studio, Hours and Direct.
  4. The detail lines. Each group is one paragraph with <br> between lines, so the lines stay locked together as a block of facts rather than drifting apart on your theme's paragraph spacing.
  5. 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

  1. 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.
  2. The button label and its link. It ships without a URL. Set it, and make the label a verb.
  3. 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.
  4. The detail lines. Each group is one paragraph with <br> 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.
  5. 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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

8,296 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|60","left":"2.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Contact</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":2,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.2vw, 4.25rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.2vw, 4.25rem))">Start with a conversation.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"32rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Tell us what you are making and roughly when it has to be finished. One of us reads every message, and you will hear back from a person rather than from a queue.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:button {"style":{"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">Write to the studio</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"left":"clamp(1.5rem, 2.6vw, 3rem)"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-left:clamp(1.5rem, 2.6vw, 3rem)"><!-- wp:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Studio</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0.4rem","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="margin-top:0.4rem;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Unit 4, Tanners Yard<br>Old Market, Bristol BS2 0EJ<br>Second floor, ring the top bell<br>Step-free entrance on Jacob Street</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Hours</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0.4rem","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="margin-top:0.4rem;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Monday to Thursday, 9.00 to 18.00<br>Friday, 9.00 to 15.00<br>Weekends by appointment only<br>Closed 24 December to 2 January</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Direct</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0.4rem","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="margin-top:0.4rem;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">New work: [email protected]<br>Press: [email protected]<br>Telephone: 0117 496 0320<br>Invoices: [email protected]</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Variation: Folio
12,083 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"#141517","text":"#efe9df"},"spacing":{"padding":{"top":"clamp(4rem, 8vw, 7.5rem)","bottom":"clamp(4rem, 8vw, 7.5rem)","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"400"}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#efe9df;background-color:#141517;padding-top:clamp(4rem, 8vw, 7.5rem);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:clamp(4rem, 8vw, 7.5rem);padding-left:clamp(1.25rem, 4vw, 4rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|60","left":"2.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%"><!-- wp:paragraph {"style":{"border":{"left":{"color":"#c8432b","style":"solid","width":"3px"}},"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"left":"0.75rem"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:#c8432b;border-left-style:solid;border-left-width:3px;color:#b9bcc2;padding-left:0.75rem;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">Ada Lindqvist / Contact</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(2.125rem, calc(1.2rem + 3.6vw), 4.25rem)","fontWeight":"500","letterSpacing":"-0.02em","lineHeight":"1.04"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:#efe9df;margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:clamp(2.125rem, calc(1.2rem + 3.6vw), 4.25rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.02em;line-height:1.04">Tell me the place and the date.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"32rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50);margin-bottom:0"><!-- wp:paragraph {"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.0625rem, 1.2vw, 1.1875rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#b9bcc2;margin-top:0;margin-bottom:0;font-size:clamp(1.0625rem, 1.2vw, 1.1875rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">A line on the building or the room, roughly when, and what the pictures are for. I read every message myself and answer the same day, usually with a question about the light.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60","bottom":"0"},"blockGap":{"top":"0.5rem","left":"1.5rem"}}},"layout":{"type":"flex","justifyContent":"left","verticalAlignment":"center"}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:0"><!-- wp:button {"url":"mailto:[email protected]","style":{"border":{"radius":"0px"},"color":{"background":"#efe9df","text":"#141517"},"spacing":{"padding":{"top":"0.875rem","bottom":"0.875rem","left":"1.375rem","right":"1.375rem"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"500","letterSpacing":"0"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" href="mailto:[email protected]" style="border-radius:0px;color:#141517;background-color:#efe9df;padding-top:0.875rem;padding-right:1.375rem;padding-bottom:0.875rem;padding-left:1.375rem;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:0">Email me</a></div>
<!-- /wp:button -->

<!-- wp:button {"url":"sms:07700900418","style":{"border":{"radius":"0px"},"color":{"background":"transparent","text":"#efe9df"},"spacing":{"padding":{"top":"0.875rem","bottom":"0.875rem","left":"0","right":"0.875rem"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"1rem","fontWeight":"400","textDecoration":"underline"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button" href="sms:07700900418" style="border-radius:0px;color:#efe9df;background-color:transparent;padding-top:0.875rem;padding-right:0.875rem;padding-bottom:0.875rem;padding-left:0;font-size:1rem;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;text-decoration:underline">Text 07700 900 418</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%"><!-- wp:group {"style":{"border":{"left":{"color":"#b9bcc2","style":"solid","width":"1px"}},"spacing":{"padding":{"left":"clamp(1.5rem, 2.6vw, 3rem)"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-left-color:#b9bcc2;border-left-style:solid;border-left-width:1px;padding-left:clamp(1.5rem, 2.6vw, 3rem)"><!-- wp:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#b9bcc2;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">Studio</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"0.5rem","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#efe9df;margin-top:0.5rem;margin-bottom:0;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">Spike Island Studios<br>Cumberland Road<br>Bristol BS1 6UX</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"#5b5f66","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-top-color:#5b5f66;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#b9bcc2;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">Hours</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"#efe9df"},"spacing":{"margin":{"top":"0.5rem","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1rem, 1.1vw, 1.0625rem)","fontWeight":"400","lineHeight":"1.6"}}} -->
<p class="has-text-color" style="color:#efe9df;margin-top:0.5rem;margin-bottom:0;font-size:clamp(1rem, 1.1vw, 1.0625rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.6">Monday to Friday, 9am to 6pm. Shoot days start before sunrise and finish when the light goes.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"#5b5f66","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-top-color:#5b5f66;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"color":{"text":"#b9bcc2"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#b9bcc2;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">Direct</h3>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"0.25rem","bottom":"0"},"blockGap":{"top":"0","left":"1.5rem"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
<div class="wp-block-buttons" style="margin-top:0.25rem;margin-bottom:0"><!-- wp:button {"url":"mailto:[email protected]","style":{"border":{"radius":"0px"},"color":{"background":"transparent","text":"#efe9df"},"spacing":{"padding":{"top":"0.875rem","bottom":"0.875rem","left":"0","right":"0.875rem"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"1rem","fontWeight":"400","textDecoration":"underline"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button" href="mailto:[email protected]" style="border-radius:0px;color:#efe9df;background-color:transparent;padding-top:0.875rem;padding-right:0.875rem;padding-bottom:0.875rem;padding-left:0;font-size:1rem;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;text-decoration:underline">[email protected]</a></div>
<!-- /wp:button -->

<!-- wp:button {"url":"tel:07700900418","style":{"border":{"radius":"0px"},"color":{"background":"transparent","text":"#efe9df"},"spacing":{"padding":{"top":"0.875rem","bottom":"0.875rem","left":"0","right":"0.875rem"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"1rem","fontWeight":"400","textDecoration":"underline"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-custom-font-size wp-element-button" href="tel:07700900418" style="border-radius:0px;color:#efe9df;background-color:transparent;padding-top:0.875rem;padding-right:0.875rem;padding-bottom:0.875rem;padding-left:0;font-size:1rem;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;text-decoration:underline">07700 900 418</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Variation: Night split
8,511 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--80);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|60","left":"2.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"60%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:60%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.2em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem);font-weight:600;letter-spacing:0.2em;text-transform:uppercase">Contact</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":2,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.2vw, 4.25rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.2vw, 4.25rem))">Start with a conversation.</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"32rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Tell us what you are making and roughly when it has to be finished. One of us reads every message, and you will hear back from a person rather than from a queue.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:button {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">Write to the studio</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%"><!-- wp:group {"style":{"border":{"left":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"left":"clamp(1.5rem, 2.6vw, 3rem)"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-left-color:currentColor;border-left-style:solid;border-left-width:1px;padding-left:clamp(1.5rem, 2.6vw, 3rem)"><!-- wp:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Studio</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0.4rem","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0.4rem;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Unit 4, Tanners Yard<br>Old Market, Bristol BS2 0EJ<br>Second floor, ring the top bell<br>Step-free entrance on Jacob Street</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Hours</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0.4rem","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0.4rem;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">Monday to Thursday, 9.00 to 18.00<br>Friday, 9.00 to 15.00<br>Weekends by appointment only<br>Closed 24 December to 2 January</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|30"},"blockGap":"0"}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Direct</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0.4rem","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0.4rem;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">New work: [email protected]<br>Press: [email protected]<br>Telephone: 0117 496 0320<br>Invoices: [email protected]</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Contact

Explore all 11 Contact patterns

Contact place rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo plugin needed

Contact place

A contact section for one address you can walk to.

ContactPreview pattern
Contact travel routes rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo 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.

ContactPreview pattern
Hours counterweight rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo plugin needed

Hours counterweight

An opening-hours sign with a monumental opening time balanced by a smaller closing-time plate.

ContactPreview pattern