Site footer: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/site-footer.html Core Patterns (https://patternpaste.com/patterns/) Footer (https://patternpaste.com/patterns/footer/) Free Standard # 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. A contrast ground carrying base type. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The wordmark. Replace "Hallmere" with your site name. - The three column headings and their links. They ship without URLs. - The eyebrow. "Design studio, Leeds" is the one line above the wordmark. - The fine print. The copyright line and the three legal links sit under the hairline. - The footer's height. The band's top padding is spacing preset 80 and its bottom is 60. The signature moment ## The wordmark is the structure The site name is set at display size and anchored to the bottom-left corner, and every link column hangs down to its line rather than sitting under a logo that floats above them. The usual footer is a small mark on top of four equal columns; here the mark is the largest thing in the section, its box cropped tight to its capitals by a 0.82 line-height, and the columns are bottom-aligned so their last link lands on the same line the wordmark sits on. The tops of the columns are left ragged on purpose: the alignment that matters is at the bottom, which is where the wordmark is. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your link and button styling. ### Set by this pattern - The inversion. - Full bleed with its own measure. - The bottom alignment. - The link boxes. - The hairline. 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 dense, inverted footer: three link columns, a fine-print strip, and the site name set large enough to be the thing holding the section together. It is built to be the last block on every page of a site, so it is the one pattern here that a visitor sees more than once. ### The signature moment: the wordmark is the structure The site name is set at display size and anchored to the bottom-left corner, and every link column hangs down to its line rather than sitting under a logo that floats above them. The usual footer is a small mark on top of four equal columns; here the mark is the largest thing in the section, its box cropped tight to its capitals by a 0.82 line-height, and the columns are bottom-aligned so their last link lands on the same line the wordmark sits on. The tops of the columns are left ragged on purpose: the alignment that matters is at the bottom, which is where the wordmark is. That is also why the columns are uneven. The wordmark column takes 34% and the three link columns take 22% each, so the section reads as one heavy left mass against a dense, quiet right one rather than as four equal boxes. Make it yoursVariations and the edits to make first ### What to change first - The wordmark. Replace "Hallmere" with your site name. It is a heading, so it takes the type ramp with it: a name much longer than about ten characters wants the clamp() maximum stepping down from 4rem, because the wordmark must not outgrow its column. - The three column headings and their links. 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. "Design studio, Leeds" is the one line above the wordmark. Make it your location, your discipline, or delete it. - The fine print. The copyright line and the three legal links sit under the hairline. Add a fourth link and the row wraps rather than spreading. - 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. The pattern states no font family anywhere. The wordmark is set in your theme's face, which is the point: it is your name, not ours. - Your colours. The ground asks for contrast and everything on it asks for base, the two slugs every stock block theme defines. If a theme defines neither, the footer falls back to black and white and still inverts. - Your spacing scale. The band's padding, the gap between columns and the space above the hairline are spacing presets, so a theme with a generous scale gets a taller footer 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 the shape of your theme's button element styles while reading as plain text. ### What it decides for itself - The inversion. This and cta-band are the only two patterns in the catalogue that flip ground and type. A footer that inverts closes a page whatever the rest of it looks like. - Full bleed with its own measure. The band spans the viewport and holds its content to 1240px, so it is a footer rather than another column of text. - The bottom alignment. The columns row is bottom-aligned, which is the signature and not a preference. Set it back to top and it becomes an ordinary footer. - The link boxes. Each link carries a full rem of padding above and below and none at either side. The padding is what makes a link comfortably tappable on a phone, at a real box height rather than the height of a line of text; the zero side padding is what keeps every link flush with its column 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. 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, 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. - Below 782px the columns stack, so the footer becomes one long list with the wordmark at the top. 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 ## Site footer: common questions Does Site footer 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 Site footer 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. Is Site footer free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Free Plugin None, core blocks only Variations 1 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, paragraph, separator Presets color 4, spacing 5, font-size 2 WordPress 7.0+ Continue exploring ## Next in Footer Explore all 9 Footer patterns (https://patternpaste.com/patterns/footer/) 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 ### Footer booking fold A local-business footer drawn as an open fold: a broad field puts a display sign-off above the address, grouped hours and contact links; a narrower booking corner begins lower, enclosed by a heavy top edge and two sides. Footer Preview pattern (https://patternpaste.com/pattern/footer-booking-fold.html) Shot in Twenty Twenty-Five Footer No plugin needed ### Composed signoff Three still slogan rows above a studio footer with contact, navigation and legal details. Footer Preview pattern (https://patternpaste.com/pattern/footer-composed-signoff.html)