# 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. Canonical: https://patternpaste.com/pattern/contact-ledger.html Section: Contact Access: Free, and free to keep. Needs: 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. Blocks: button, buttons, column, columns, group, heading, paragraph Keywords: contact, ledger, email, phone, address, hours ## Variations (4) ### Ledger (the default) Identical markup in every theme. The invitation at display size over four ruled rows on your base, with your contrast on them. The values are set large enough to read as content, and the rules follow your text because they are currentColor. ### Mend This variation states its own colours and states its own type: identical in every theme. The Mend physio set: a mint band, deep teal ink, reception, email, clinic and hours as ruled rows opened by an apricot rule, sage labels, a teal 6px-corner button, all in Avenir Next. ### Night ledger Identical markup in every theme. The colour axis, done the only way the contract guarantees: the section inverts to your contrast with your base on it, and the rules follow the type because they are currentColor. Every theme has both slugs, so this arrives everywhere. ### White and sage This variation states its own colours and states its own type: identical in every theme. States clinical white, deep green-grey type, sage labels and a sage pill button, all in Avenir Next, for a dental practice or clinic: the phone number and email are large underlined links. --- ## 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'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. ## 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. ## 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. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(1.375rem, 2.4vw, 2rem)