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 from4rem, 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
contrastand everything on it asks forbase, 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-bandare 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
currentColorand 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.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.
13,751 bytes
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|60","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--60);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"bottom","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|60","left":"1.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-bottom"><!-- wp:column {"verticalAlignment":"bottom","width":"34%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:34%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.9vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.2em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.9vw, 0.875rem);font-weight:600;letter-spacing:0.2em;line-height:1.2;text-transform:uppercase">Design studio, Leeds</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 4.8vw, 4rem))"}}} -->
<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 4.8vw, 4rem))">Hallmere</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"bottom","width":"22%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:22%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Studio</h3>
<!-- /wp:heading -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">About the studio</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">How we work</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Case studies</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">The journal</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"bottom","width":"22%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:22%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Services</h3>
<!-- /wp:heading -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Brand systems</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Websites and CMS</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Editorial work</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Art direction</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"bottom","width":"22%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:22%"><!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<h3 class="wp-block-heading" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Contact</h3>
<!-- /wp:heading -->
<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">New enquiries</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Join the studio</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Instagram</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">LinkedIn page</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"},"spacing":{"margin":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|40"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--40);background-color:currentColor;color:currentColor"/>
<!-- /wp:separator -->
<!-- wp:group {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.875rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left","verticalAlignment":"center"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem))","letterSpacing":"0.01em"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem));letter-spacing:0.01em">© Hallmere Design. All rights reserved.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0.25rem","left":"1.5rem"}}}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Privacy policy</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Terms of use</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"0px","right":"0px"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:currentColor;background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Accessibility</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
