[Library] Contact

Catalogue accessStandard

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. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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.

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.

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.
A contact section without a form, and why158 words

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.

The variation59 words
  • 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.
Notes93 words
  • 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.
Back to the library

Continue exploring

Next in Contact

Explore all 4 Contact patterns