Footer ledger: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/footer-ledger.html Core Patterns (https://patternpaste.com/patterns/) Footer (https://patternpaste.com/patterns/footer/) Catalogue access Standard # Footer ledger A footer read as a colophon: four ruled rows run the full container width, each a small tracked label hanging in a narrow left column against its values in a wide right one. Address, contact links, social links and the legal line each take a row, the first and last rules close the ledger, and the site name sits above it at a moderate size beside one line of orientation. No link columns, no grid of boxes, and every hairline follows your type. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The site name and the orientation line. Replace "Hallmere" and the sentence beside it. - The four values. The address is one paragraph with a line break; the contact and social links ship without URLs and with labels of eight characters or more, which keeps a sensible tap target. - The labels. Visit, Write, Follow and Legal are h3 headings. - The number of rows. A row is one group block. - The footer's height. The band's top padding is spacing preset 80 and its bottom is 60. The signature moment ## The ruled rows Four hairlines run the whole container width and a fifth closes the last row, so the footer reads as a ruled ledger with its labels hanging in a 25% gutter and its values set in the 75% beside them. The mark is made of length and repetition, not of colour: the rules are currentColor, the labels are small and tracked, the values are body size, and the difference between a 13px uppercase label and a 16px line beside it is the whole of the contrast. Take the colour away and the rows still read as rows; change the typeface and the rules still run exactly as far as the content does. That is why it survives colourlessness, and it is also why a buyer who wants a footer that is quieter than the usual four columns of links has a reason to pick this one. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - The rules. - Your spacing scale. - Your link and button styling. ### Set by this pattern - The rows. - The 25/75 split. - Proportion. - Label alignment. - The link boxes. - 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 footer built as a colophon rather than a sitemap. Under a short header, four ruled rows run the full width of the container: Visit, Write, Follow and Legal. Each row is a hanging label in a narrow left column and its values in a wide right one, the way a ledger or a book's back page sets its particulars. There are no link columns and no grid of boxes, only rows, on your base with your contrast on it. ### The signature moment: the ruled rows Four hairlines run the whole container width and a fifth closes the last row, so the footer reads as a ruled ledger with its labels hanging in a 25% gutter and its values set in the 75% beside them. The mark is made of length and repetition, not of colour: the rules are currentColor, the labels are small and tracked, the values are body size, and the difference between a 13px uppercase label and a 16px line beside it is the whole of the contrast. Take the colour away and the rows still read as rows; change the typeface and the rules still run exactly as far as the content does. That is why it survives colourlessness, and it is also why a buyer who wants a footer that is quieter than the usual four columns of links has a reason to pick this one. The header above the ledger is deliberately moderate. The site name is an h2 at clamp(1.75rem, 2.6vw, 2.5rem), bottom-aligned to a single line of orientation in the wide column, so the name sits on the same line as the sentence beside it and the first rule underlines them both. A display wordmark here would fight the rows; site-footer is the pattern for that. Make it yoursVariations and the edits to make first ### What to change first - The site name and the orientation line. Replace "Hallmere" and the sentence beside it. Keep the sentence under about seventy characters so it holds one line at desktop width; a name much longer than about twelve characters wants the clamp() maximum stepping down from 2.5rem so it stays inside its 25% column. - The four values. The address is one paragraph with a line break; the contact and social links ship without URLs and with labels of eight characters or more, which keeps a sensible tap target. Keep them there. - The labels. Visit, Write, Follow and Legal are h3 headings. Keep them to one or two words so they hold one line at 25%. - 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. - The footer's height. The band's top padding is spacing preset 80 and its bottom is 60. Step both down one rung if your theme's scale is already generous. 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 site name, the labels and the links 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 between label and values and the space under the header are spacing presets, so a theme with a generous scale gets a taller ledger without you editing anything. - Your link and button styling. Every link is a core button with its own colours cleared back to the band's, so it takes your theme's button element styles on hover and focus while reading as plain text. ### What it decides for itself - The rows. Each row is a group carrying a currentColor top border with spacing preset 30 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 against each other and the rules are shared, not doubled. - The 25/75 split. Narrow enough that the label reads as a margin note, wide enough that a one-word label sits on one line in a serif and a sans. The header uses the same split so the site name and the first label share a left edge. - Proportion. The site name at clamp(1.75rem, 2.6vw, 2.5rem), weight 700, tracking -0.02em on a line height of 1; the orientation line at clamp(1rem, 1.15vw, 1.125rem); the labels at 13 to 14px, uppercase, 0.16em tracked; the address and the legal line at 15 to 16px. - Label alignment. In the three rows whose values begin with a link, the label carries a 1rem top margin, which is the link's own top padding, so the label's line sits level with the link text rather than a line above it. The Visit row's label has no margin because its value is a plain paragraph. - The link boxes. Each link carries a full rem of padding above and below and none at either side, so it is comfortably tappable on a phone and flush with the column's left edge. A run of links in a row is one buttons block with a horizontal gap, so it wraps rather than stacking. - Full bleed with its own measure. The band spans the viewport and holds its content to 1240px. 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. No plugin, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the footer can resolve to nothing. - 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 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 and every piece of text and every link becomes your base. The rules need no change because they are currentColor. Composition, sizes and copy are identical. - Charcoal and saffron (charcoal-and-saffron) states a charcoal ground, ivory values and saffron rules and labels. The ledger labels alone take a monospace face. - Below 782px the columns stack, so each row reads label, then its values, then the next rule. The labels keep their gap to the rule above them, the link runs wrap inside the row, and the header becomes the site name over its sentence. That is core's stacking, not ours, and it is why the link boxes are sized for a thumb rather than for a mouse. - 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 site name is large text and is claimed at 3:1; everything else is body text and is held to 4.5:1. Measured per host theme against the resolved values, not the authored chains. Questions ## Footer ledger: common questions Does Footer 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 Footer ledger match my theme? Choose by variation. Ledger and Night ledger take your theme’s palette; Charcoal and saffron brings its own colours. How many variations does Footer ledger have? 3: Ledger, Charcoal and saffron and Night ledger. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Footer ledger free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 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. 15KB of core-block markup, 7 blocks (button, buttons, column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.html)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.html)Header Nav bar A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own. (https://patternpaste.com/pattern/nav-bar.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Footer Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 6, spacing 5, font-size 2 WordPress 7.0+ Continue exploring ## Next in Footer Explore all 9 Footer patterns (https://patternpaste.com/patterns/footer/)Also in Contact (https://patternpaste.com/patterns/contact/) Shot in Twenty Twenty-Five Footer No plugin needed ### Footer cover colophon A footer that ends the page on a photograph: a full-bleed cover under a heavy veil of your theme's contrast colour, a display-size sign-off high on it with an outlined contact button and one line of copy, four short link columns lower down, and along the very floor a hairline and the small print. Footer Preview pattern (https://patternpaste.com/pattern/footer-cover-colophon.html) Shot in Twenty Twenty-Five Footer No plugin needed ### Footer local business A footer for a business people visit: the street address set as the biggest thing on it, then three columns under it for the opening hours in ruled rows, a tap-to-call number and an email, and the social links, and a legal line with the company number and three policy links under a hairline. Footer Preview pattern (https://patternpaste.com/pattern/footer-local-business.html) Shot in Twenty Twenty-Five Footer No plugin needed ### Footer nameplate A paper footer that ends on the site name set enormous: a quiet top row of an eyebrow, one line of orientation and two compact link lists, a fine-print strip with the copyright and three legal links, a currentColor hairline, and then the name as the last line of the page at up to 176px, cropped tight to its own capitals. Footer Preview pattern (https://patternpaste.com/pattern/footer-nameplate.html)