Pattern Paste
Subscribe

Core Patterns Contact

FreeStandard

Contact ledger

A contact section with no form in it.

A display-size invitation sits over four ruled rows, each a small tracked label in a narrow left column against its value in a wide right one: email, phone, studio address and opening hours, all set at the scale of content rather than of fine print. One action closes the section, and every hairline is currentColor so it follows your type.

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. Replace "Tell us what you are making, and who it is for." with the one sentence you would say to someone about to get in touch.
  2. The four values. The email, the phone number, the address and the hours are the whole point of the section, so put your own in before anything else.
  3. The action's link. The button ships without a URL, like every link in this catalogue.
  4. The reassurance line. It says there is no form and that replies come back the same day.
  5. The number of rows. A row is one group block.

The signature moment

Contact details at the scale of content

The values are set at clamp(1.375rem, 2.4vw, 2rem), up to 32px, which is larger than the body copy on the page they sit on, and the labels beside them are 13 to 14px uppercase. Contact details are almost always the smallest type on a site; here they are the second-largest, and the collision between a tracked 13px label and a 32px address is what the section is made of. The mark survives colourlessness because it is made of scale and of rule length, not of colour: take the palette away and the rows still read as rows, change the typeface and the hairlines still run exactly as far as the content does.

Theme handoff

What comes from where

From your theme

  • The typeface.
  • Your colours.
  • The rules.
  • Your spacing scale.
  • Your button styling.

Set by this pattern

  • The rows.
  • The 22/78 split.
  • Label alignment.
  • Proportion.
  • The action's colours.
  • Its own ground and its own air.
  • Full bleed with its own measure.

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 a ledger of facts. A display-size invitation sits over four ruled rows, one each for email, phone, the studio address and the opening hours, with a small tracked label hanging in a narrow left column and the value set large beside it. One action closes the section.

There is no form in it, and that is deliberate. Nothing in this catalogue ships a script, a stylesheet or a raw HTML block, so a form here would be an unstyled core-block form or nothing at all. This pattern is the other answer: publish the four facts a visitor actually wants, set them large enough to read as content, and make the action a mail link rather than a field a visitor has to trust.

The signature moment: contact details at the scale of content

The values are set at clamp(1.375rem, 2.4vw, 2rem), up to 32px, which is larger than the body copy on the page they sit on, and the labels beside them are 13 to 14px uppercase. Contact details are almost always the smallest type on a site; here they are the second-largest, and the collision between a tracked 13px label and a 32px address is what the section is made of. The mark survives colourlessness because it is made of scale and of rule length, not of colour: take the palette away and the rows still read as rows, change the typeface and the hairlines still run exactly as far as the content does.

The invitation above the ledger is the counterweight. It is an h2 at clamp(2.5rem, 5.6vw, 4.5rem), held to an 820px measure so it breaks into two or three strong lines, and it is the only thing on the section larger than the values under it.

This is a contact section, not a footer. footer-ledger uses the same house ruled row and does the opposite with it: its values are body size, it carries social and legal rows, and its wordmark is moderate. Here there are four rows, all of them facts a visitor acts on, and the header is an invitation rather than a colophon.

Make it yoursVariations and the edits to make first

What to change first

  1. The invitation. Replace "Tell us what you are making, and who it is for." with the one sentence you would say to someone about to get in touch. Six to twelve words: this ramp is built for two or three lines at desktop width.
  2. The four values. The email, the phone number, the address and the hours are the whole point of the section, so put your own in before anything else. Keep each to one or two lines; a value running to three lines at this size starts to outweigh the invitation above it.
  3. The action's link. The button ships without a URL, like every link in this catalogue. Point it at mailto: and your address, and it opens the visitor's own mail app with nothing for them to fill in. A tel: link on the phone row is the other move a buyer often wants; select the value and link the number itself.
  4. The reassurance line. It says there is no form and that replies come back the same day. If that is not true of you, change it or delete it; the section still reads without it.
  5. The number of rows. A row is one group block. Copy one to add a row, or delete one. If you delete the last row, move its bottom border to the new last row so the ledger still closes; if you add a row after it, remove the bottom border from the row that used to be last.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. No font family is stated anywhere, in the base or the variation. The invitation, the labels and the values are all set in your theme's face.
  • Your colours. The ground asks for base and everything on it asks for contrast, the two slugs every stock block theme defines, each written as a fallback chain ending on a colour WordPress itself guarantees. No accent slug appears in any rung.
  • The rules. Every hairline is a 1px currentColor border on its row, so it follows the type wherever your theme puts it and cannot resolve to nothing.
  • Your spacing scale. The band's padding, the air inside each row, the gap above the action and the space under the invitation are spacing presets, so a theme with a generous scale gets a taller ledger without you editing anything.
  • Your button styling. The action is a core button taking your theme's button element styles on hover and focus. It carries no typography of its own, because a button's typography serialises differently across WordPress versions; without it the markup stays valid across editor versions.

What it decides for itself

  • The rows. Each row is a group carrying a currentColor top border with spacing preset 40 above and below its content; the last row carries a bottom border too, so the ledger closes on a rule. The band's block gap is zero, so the rows butt and the rules are shared rather than doubled.
  • The 22/78 split. Narrow enough that a one-word label reads as a margin note, wide enough that an address holds two lines without breaking awkwardly in a serif or a sans.
  • Label alignment. The label carries a 0.5rem top margin so its cap line sits level with the much larger value beside it rather than a line above it.
  • Proportion. The eyebrow and the labels at 13 to 14px, uppercase, 0.16 to 0.18em tracked; the invitation at clamp(2.5rem, 5.6vw, 4.5rem), weight 700, tracking -0.03em on a line height of 1.03; the values at clamp(1.375rem, 2.4vw, 2rem), weight 500, tracking -0.015em on 1.2; the reassurance line at 15 to 16px.
  • The action's colours. The button inverts against the band, so on the base it is your contrast ground with your base type: the same pair your page body already uses, in reverse. It cannot vanish in any theme, because the two chains are each other's opposites.
  • Its own ground and its own air. The section states its ground and a full spacing preset 80 above and below, so it does not depend on the section above or below it for colour or for air.
  • Full bleed with its own measure. The band spans the viewport and holds its content to 1240px.

Display type

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(1.375rem, 2.4vw, 2rem)
Technical notesBlock mechanics, responsive behaviour and constraints

Notes

  • Core blocks only: group, columns, column, heading, paragraph, buttons, button. No separator block is used; the rules are group borders, because a core/separator without is-style-wide renders as a centred stub in Twenty Twenty-Four. No plugin, nothing to keep updated.
  • No promise axis is declared: colour, type and motion are all the default, so this pattern inherits your palette and your typeface and carries no CSS and no JavaScript of its own.
  • Night ledger is the one variation. It is a complete file you copy instead of the base, and it moves the colour axis only: the ground becomes your contrast, every piece of text becomes your base, and the action inverts with them. The rules need no change because they are currentColor. Composition, sizes and copy are identical.
  • Below 782px the columns stack, so each row reads label, then its value, then the next rule. That is core's stacking, not ours. The values keep their size on a phone because their clamp() floor is 22px, which is the point of the pattern.
  • Every pair, in the base and in the variation, is your contrast on your base or the reverse, the pair your theme already sets body copy on. The invitation and the four values are large text and are claimed at 3:1; the labels, the eyebrow and the reassurance line are held to 4.5:1. Measured per host theme against the resolved values, not the authored chains.

Questions

Contact ledger: common questions

Does Contact ledger 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 ledger match my theme?

Choose by variation. Ledger and Night ledger take your theme’s palette; Mend and White and sage bring its own colours.

How many variations does Contact ledger have?

4: Ledger, Mend, Night ledger and White and sage. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Contact ledger free?

Yes. It is one of 62 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.

11,316 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)"},"blockGap":"0"},"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:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained","contentSize":"820px","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--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":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.18em","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:var(--wp--preset--spacing--30);font-size:clamp(0.8125rem, 0.95vw, 0.875rem);font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Contact</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.6vw, 4.5rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.6vw, 4.5rem))">Tell us what you are making, and who it is for.</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"22%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:22%"><!-- 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.5rem","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.5rem;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Email</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:clamp(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">[email protected]</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"22%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:22%"><!-- 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.5rem","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.5rem;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Phone</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:clamp(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">0117 496 0320</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"22%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:22%"><!-- 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.5rem","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.5rem;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Studio</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:clamp(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">Unit 4, Tanners Yard, Old Market<br>Bristol BS2 0EJ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","style":"solid","width":"1px"},"bottom":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"22%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:22%"><!-- 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.5rem","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.5rem;margin-bottom:0;font-size:clamp(0.8125rem, 0.95vw, 0.875rem)">Hours</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:clamp(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">Monday to Thursday, 9 to 5<br>Friday by appointment</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained","contentSize":"620px","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"top":"1.125rem","bottom":"1.125rem","left":"2rem","right":"2rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:1.125rem;padding-right:2rem;padding-bottom:1.125rem;padding-left:2rem">Start an email</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))"}}} -->
<p style="margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">There is no form here. The button opens your visitor's own mail app with the studio address already in it, and every reply comes back the same day.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Night ledger
11,455 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)"},"blockGap":"0"},"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:group {"style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained","contentSize":"820px","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.18em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:var(--wp--preset--spacing--30);font-size:clamp(0.8125rem, 0.95vw, 0.875rem);font-weight:600;letter-spacing:0.18em;text-transform:uppercase">Contact</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.6vw, 4.5rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 5.6vw, 4.5rem))">Tell us what you are making, and who it is for.</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

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

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<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(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">[email protected]</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

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

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<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(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">0117 496 0320</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

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

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<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(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">Unit 4, Tanners Yard, Old Market<br>Bristol BS2 0EJ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

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

<!-- wp:column {"verticalAlignment":"top","width":"78%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:78%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(1.375rem, 2.4vw, 2rem)","fontWeight":"500","letterSpacing":"-0.015em","lineHeight":"1.2"}}} -->
<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(1.375rem, 2.4vw, 2rem);font-weight:500;letter-spacing:-0.015em;line-height:1.2">Monday to Thursday, 9 to 5<br>Friday by appointment</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained","contentSize":"620px","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- 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.125rem","bottom":"1.125rem","left":"2rem","right":"2rem"}}}} -->
<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.125rem;padding-right:2rem;padding-bottom:1.125rem;padding-left:2rem">Start an email</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"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-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))">There is no form here. The button opens your visitor's own mail app with the studio address already in it, and every reply comes back the same day.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Contact

Explore all 11 Contact patterns

Contact getting here rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo plugin needed

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.

ContactPreview pattern
Contact offices rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveContactNo plugin needed

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.

ContactPreview pattern
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