Footer sign-off: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/footer-signoff.html Core Patterns (https://patternpaste.com/patterns/) Footer (https://patternpaste.com/patterns/footer/) Catalogue access Standard # Footer sign-off A footer that opens with an ask instead of a sitemap: a tracked eyebrow, a display-size question across a wide left measure and one filled button beneath it, set against a narrow, dense stack of six links bottom-aligned so the last link lands on the button's line. A currentColor hairline then drops to a copyright line and three legal links. Paper ground, contrast type, not inverted. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The question. "Got a brief that deserves better?" is 33 characters and holds two lines at the wide measure. - The button label. "Start a project" ships without a URL. - The six links and their heading. They ship without URLs. - The eyebrow. "Start a conversation" is the one line above the question. - The fine print. Replace "Halvard Studio" with your name and point the three legal links at your pages. - The footer's height. The band's top padding is spacing preset 80 and its bottom is 50. The signature moment ## Asymmetry with intent A wide measure of display type runs against a narrow, dense counterweight, and the two are bottom-aligned so the last link in the stack lands on the button's line. The left column takes 62% and holds three things at three scales: a small tracked eyebrow, a question at up to 60px with tight negative tracking and a 1.0 line-height, and a filled button. The right column takes 30%, leaving an 8% gap beyond the column gutter so the split reads as deliberate rather than as a grid, and holds six links packed at a quarter-rem gap. The left is airy and loud, the right is quiet and packed, and they meet at one baseline. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your button styling. ### Set by this pattern - The split. - The type ramp. - The filled button. - The link boxes. - The hairline. - The fine print row. 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 that opens with an ask. Instead of a wordmark over four equal columns of links, the left two thirds carry a tracked eyebrow, a display-size question and one filled button; the right third carries a short heading and a single dense stack of six links. A hairline then drops to the fine print. It sits on the theme's base, not inverted, so it closes a light page without a hard band. ### The signature moment: asymmetry with intent A wide measure of display type runs against a narrow, dense counterweight, and the two are bottom-aligned so the last link in the stack lands on the button's line. The left column takes 62% and holds three things at three scales: a small tracked eyebrow, a question at up to 60px with tight negative tracking and a 1.0 line-height, and a filled button. The right column takes 30%, leaving an 8% gap beyond the column gutter so the split reads as deliberate rather than as a grid, and holds six links packed at a quarter-rem gap. The left is airy and loud, the right is quiet and packed, and they meet at one baseline. That survives colourlessness because it is made of proportion, weight and alignment, none of which a theme supplies. The only colours in the section are the theme's own base and contrast, and the only rule is currentColor, so nothing in the design depends on a palette to read. Make it yoursVariations and the edits to make first ### What to change first - The question. "Got a brief that deserves better?" is 33 characters and holds two lines at the wide measure. A question much longer than about 40 characters wants the clamp() maximum stepping down from 3.75rem. - The button label. "Start a project" ships without a URL. Keep it short; the button is the one filled thing on the section and a long label widens it into a bar. - The six links and their heading. They ship without URLs. The labels are deliberately eight characters or more; keep them there, because a very short label makes a small tap target on a phone. - The eyebrow. "Start a conversation" is the one line above the question. Make it your location, your discipline, or delete it. - The fine print. Replace "Halvard Studio" with your name and point the three legal links at your pages. A fourth link wraps rather than spreads. - The footer's height. The band's top padding is spacing preset 80 and its bottom is 50. Step both down one rung if your theme's scale is generous. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. The pattern states no font family anywhere. The question, the links and the fine print 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 with a core default behind it. The filled button asks for the same pair the other way round, so it stays the darkest thing on the section in any theme. - Your spacing scale. The band's padding, the column gap, the heading's margins and the space around the hairline are spacing presets. - Your button styling. The call to action is a core button, so it takes your theme's button element styles for hover and focus. The links are core buttons too, with their background cleared to transparent, so they read as text while keeping a real tap target. ### What it decides for itself - The split. 62% against 30%, bottom-aligned. Set both columns to 50% and top-aligned and it becomes an ordinary two-column footer. - The type ramp. The eyebrow is 13px to 14px tracked at 0.2em; the question is clamp(2.25rem, 4.6vw, 3.75rem) at weight 700, letter-spacing -0.025em, line-height 1.0; the link heading is 13px to 15px tracked at 0.16em; the fine print is 15px to 16px. - The filled button. Contrast ground, base type, square corners, 1rem above and below and 1.75rem at the sides. It carries no typography attribute, so its size is your theme's button size. - The link boxes. Each link carries a full rem of padding above and below and none at either side, so it is tappable on a phone at a real box height while staying flush with its heading. - The hairline. The rule above the fine print is currentColor and set wide, so it follows the type wherever your theme puts it and cannot resolve to nothing. - The fine print row. A wrapping flex group with the copyright line at one end and the legal links at the other. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, columns, column, heading, paragraph, buttons, button, separator. No plugin, nothing to keep updated. - Every colour is a fallback chain ending on a colour WordPress itself guarantees: text and the button's ground ask for contrast then black, the section's ground and the button's type ask for base then white. 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-signoff is the one variation, and it moves the colour axis only: every chain swaps, so the footer sits on contrast with base type and the button becomes base with contrast type. The markup is otherwise identical. - Below 782px the columns stack, so the ask comes first with its button, then the link heading and the six links, then the hairline and the fine print. That is core's stacking, not ours, and it is why the link boxes are sized for a thumb rather than for a mouse. Questions ## Footer sign-off: common questions Does Footer sign-off need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, paragraph and separator), so it pastes into the block editor with nothing to install. Will Footer sign-off match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Footer sign-off have? 2: Paper sign-off and Night sign-off. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Footer sign-off free? It is included with a subscription, with every Core Pattern and variation. 64 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. 11KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, paragraph, separator), 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 2 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, paragraph, separator Presets color 6, spacing 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Footer Explore all 9 Footer patterns (https://patternpaste.com/patterns/footer/)Also in Call to action (https://patternpaste.com/patterns/cta/) 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) Shot in Twenty Twenty-Five Footer No plugin needed ### Footer strip A footer that is one line under a heavy rule: a 4px currentColor bar runs the full width of the viewport, and beneath it the site name, five links and the copyright share a single short band on your base colour. Footer Preview pattern (https://patternpaste.com/pattern/footer-strip.html) Shot in Twenty Twenty-Five Footer No plugin needed ### Site footer An inverted footer where the site name, set at display size, is the structure: three dense link columns hang to its line instead of sitting under a floating logo. Footer Preview pattern (https://patternpaste.com/pattern/site-footer.html)