[Library] Contact

Catalogue accessStandard

Contact offices

A contact section for a practice with more than one room in it. Four equal bays hang from one continuous currentColor hairline, and each holds the same six lines: the city, its time zone tracked small beneath, three lines of address, its own hours and its own direct email and telephone. Nothing is central and there is no single button, because each office answers its own post. A closing rule under the four sets where deliveries go. 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 for a practice with more than one room in it. Four equal bays hang from one continuous hairline, and each holds exactly the same six lines: the city, its time zone, three lines of address, its own hours, and its own direct email and telephone.

Both of the other contact patterns in this catalogue assume there is one place to go. This one assumes there are four, and the whole design follows from that.

The signature moment

The same shape, four times, under one unbroken rule

Every bay is identical in structure and different only in its words, and the four top borders butt into a single hairline that runs the full 1240 because the columns carry no gap between them. The section is a comb: one rule across the top, four bays hanging off it, one rule closing them underneath. Nothing is emphasised, nothing is recommended, and no office is the head office, so the eye stops reading and starts comparing: it runs across the four city names, then across the four sets of hours, then across the four telephone numbers.

That is a composition rather than a decoration, so it survives having no colour of its own. Take the type away and the section is still a rule with four equal bays under it.

The time zone under each city is the one small piece of type in the whole section, at 13 to 14px uppercase and 0.18em tracked against a city name at up to 32px. It is there because it is the fact a reader actually wants when they are looking at four addresses at once, and because it gives each bay a collision of scale at the top where the eye lands.

What it inherits from your theme

  • The typeface. No font family is stated anywhere, in the base or the variation. The city names, the time zones and the addresses are all set in yours.
  • Your colours. The ground asks for base and every piece of text 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.
  • Every rule. The four bay rules and the closing rule are 1px currentColor borders, so they follow your text colour wherever your theme puts it and cannot resolve to nothing.
  • Your spacing scale. The band's air, the space above each bay's content and the gaps between the six lines are spacing presets, so a generous theme scale gives a taller, looser directory.

What it decides for itself

  • Full bleed with its own measure. The band 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 colour or for air.
  • Four bays, and the gap that is not there. The columns block sets its horizontal gap to zero and each column carries its own padding-right instead. That is what makes the four top borders meet: with a gap the rule would break three times and the comb would become four cards.
  • Equality. All four columns are 25%, all four carry the same border, the same padding and the same six blocks in the same order. Repetition is the signature, so nothing is allowed to vary except the words.
  • The header's measure. The heading sits in an 820px group and the line under it in a 32rem group, so the standfirst breaks at about sixty characters rather than running the width of the band.
  • Proportion of type. The eyebrow at 13 to 14px, uppercase, 0.2em tracked; the heading at clamp(2.5rem, 5.2vw, 4rem), weight 700, tracking -0.03em on 1.03; the city names at clamp(1.5rem, 2.1vw, 2rem), weight 600, tracking -0.02em; the time zones at 13 to 14px tracked; every fact line at 15 to 16px on a line height of 1.5.
  • The closing rule. A group with a currentColor top border under the four bays, carrying the one thing that is true of the whole company rather than of one office. It gives the comb a floor.
  • The closing note is held to 28rem, in a nested constrained group, so it echoes the lede's measure instead of running the full width of the rule above it.

What to change first

  1. The offices. A bay is one core/column. Delete one and set the remaining columns to 33.33%, or copy one and set them all to 20%; the rule above them closes up either way because it is made of the columns' own borders.
  2. The city names. One word each, ideally. This ramp is built for a single place name; a two-line name in one bay and a one-line name in the next breaks the comparison the section exists for.
  3. The time zones. If your offices are all in one country, put the district or the building here instead, or delete the line from all four. Delete it from one only and the bays stop being the same shape.
  4. The hours. Each office keeps its own, which is the point. Two lines each is the shape the bay is built for.
  5. The direct lines. Each bay ships an email and a telephone number as one paragraph. Select the address and link it with mailto:, and the number with tel:, if you want them tappable.
  6. The closing line. It says where post goes. If that is not a fact about you, put your company registration or your VAT number there, or delete the group and let the bays close on their own.
Why there is no button118 words

Every other contact pattern here closes on one action. This one does not, and that is a decision rather than an omission: a single central button under four offices sends everyone to the same inbox and quietly contradicts the section. Each bay carries its own email and its own telephone number instead, so the action is per office. If you want a central enquiry route as well, add one line under the closing rule.

There is no form in it either. WordPress core ships no form block, so an enquiry form cannot be authored under a core-only rule at all; it belongs to the companion plugin. The facts here are text a visitor can read, select and copy.

Notes307 words
  • Core blocks only: group, columns, column, heading, paragraph, and a spacer in the variation. No separator block is used; every rule is a border, 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.
  • Offices in pairs is the one variation. It is a complete file you copy instead of the base and it moves the composition, not the palette: the same four offices in two rows of two, with the city names at display size instead of heading size. The density inverts, so each office reads as a statement with room around it rather than as a column in a directory. It is the right file if you have two or three places and want them to feel substantial; the base is the right one if you have four or more and want them compared.
  • Below 782px the columns stack, so the four bays become four stacked blocks, each keeping its own rule above it. That is core's stacking, not ours, and it is why the rule is on the column rather than on the row: a rule drawn once across the top would vanish for three offices out of four on a phone.
  • Every pair is your contrast on your base, the pair your theme already sets body copy on. The section heading and the city names are large text and are claimed at 3:1; the eyebrow, the time zones, the address lines, the hours, the direct lines and the closing line are all held to 4.5:1. Measured per host theme against the resolved values, not the authored chains.
Display type45 words

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

  • the address and contact lines in the four-up office grid at clamp(0.9375rem, 1vw, 1rem): on the theme's medium an office column at 820 in Twenty Twenty-Four drops under 20 characters a line
Back to the library

Continue exploring

Next in Contact

Explore all 4 Contact patterns