[Library] Contact

Catalogue accessStandard

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. 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 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.

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 carrying typography is valid in WordPress 7.0 and invalid at this catalogue's 6.6 floor.

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.

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.
Notes242 words
  • 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.
Display type18 words

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

  • paragraph at clamp(1.375rem, 2.4vw, 2rem)
Back to the library

Continue exploring

Next in Contact

Explore all 4 Contact patterns