Start free trial

Library Footer

FreeStandard

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. Everything above it is deliberately small.

States no colour and no font of its own.

Variation
ThemePreview size
As authoredColour
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The nameplate. Replace "Hallmere" with your site name.
  2. The eyebrow and the orientation line. "Architecture, Bristol" and the one sentence under it are the only copy in the left column.
  3. The two link lists and their headings. They ship without URLs.
  4. The fine print. The copyright line and the three legal links sit above the hairline.
  5. The footer's height. The band's top padding is spacing preset 80 and the gap above the fine print is 60.

The signature moment

Scale collision

Everything in the footer is small and quiet, and then the last line of the page is the site name at up to 176px, with nothing at any size between. The eyebrow is 13 to 14px, the link lists and the fine print sit at 15 to 18px, and the nameplate runs clamp(3.5rem, 13vw, 11rem): 56px on a phone, 176px on a wide screen. It is weight 700, tracked in to -0.04em and held on a 0.8 line height, so its box is cropped to its capitals and the letters sit on the band's bottom edge with only the smallest spacing preset beneath them. The jump from fine print to nameplate is the whole design. It survives colourlessness because it is made of proportion, not decoration: the collision is the same in a serif theme and a sans one, on paper and inverted, and the hairline between the two scales is currentColor, so it cannot blank.

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 nameplate.
  • Full bleed with its own measure.
  • The top row's proportions.
  • The fine-print row.
  • 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 footer on paper that ends on the site name. A quiet top row carries a short tracked eyebrow, one line of orientation and two compact link lists; a fine-print strip carries the copyright and three legal links; a hairline runs under it; and then the name is set at display size as the last line of the page, sitting on the bottom edge of the band. It is the paper counterpart to site-footer, which inverts and hangs its columns to the wordmark's line. This one keeps the columns small and conventional so that the name can be the only large thing.

The signature moment: scale collision

Everything in the footer is small and quiet, and then the last line of the page is the site name at up to 176px, with nothing at any size between. The eyebrow is 13 to 14px, the link lists and the fine print sit at 15 to 18px, and the nameplate runs clamp(3.5rem, 13vw, 11rem): 56px on a phone, 176px on a wide screen. It is weight 700, tracked in to -0.04em and held on a 0.8 line height, so its box is cropped to its capitals and the letters sit on the band's bottom edge with only the smallest spacing preset beneath them. The jump from fine print to nameplate is the whole design. It survives colourlessness because it is made of proportion, not decoration: the collision is the same in a serif theme and a sans one, on paper and inverted, and the hairline between the two scales is currentColor, so it cannot blank.

Make it yoursVariations and the edits to make first

What to change first

  1. The nameplate. Replace "Hallmere" with your site name. It is a heading, so it takes your theme's heading face. A name longer than about ten characters needs the clamp() stepping down: lower the 11rem maximum and the 13vw term together (for twelve characters, try 9rem and 10vw), so the name never outgrows the 1240px container or the phone's width. A name with a descender, such as a g or a y, may want the line height raised from 0.8 to 0.9 so the tail clears the band's bottom edge.
  2. The eyebrow and the orientation line. "Architecture, Bristol" and the one sentence under it are the only copy in the left column. Keep the sentence under about seventy characters; it is set to hold a short measure.
  3. The two link lists and their headings. 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. Add a link by copying one core/buttons block inside the list; each link sits in its own so the list stacks.
  4. The fine print. The copyright line and the three legal links sit above the hairline. Add a fourth link and the row wraps rather than spreading.
  5. The footer's height. The band's top padding is spacing preset 80 and the gap above the fine print is 60. Step either down one rung if your theme's scale is already generous. Leave the bottom padding at 30: it is what puts the name on the edge.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • The typeface. No font family is stated anywhere. The nameplate is a heading, so it takes your theme's heading face, and the lists and the fine print take your body face. It is your name, set in your type.
  • Your colours. The ground asks for base and everything on it asks for contrast, the two slugs every stock block theme defines. If a theme defines neither, the footer falls back to white and black and still reads.
  • Your spacing scale. The band's top padding, the gap between the columns, the gap above the fine print and the air either side of 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 nameplate. Its size, weight, tracking and line height are stated, and its bottom margin is zero, so it sits on the band's edge rather than floating above it. The band's bottom padding is the smallest preset for the same reason.
  • Full bleed with its own measure. The band spans the viewport and holds its content to 1240px.
  • The top row's proportions. The eyebrow and orientation line take 40% and the two link lists take 30% each, top-aligned, so the row reads as a short statement against two narrow lists rather than as three equal boxes. The orientation line is held to a 24rem measure so it reads as one or two short lines and never as a paragraph.
  • The fine-print row. A flex row that wraps, with the copyright pushed to the left edge and the three legal links to the right. Below about 700px the links drop under the copyright instead of squeezing.
  • The link boxes. Each link carries a full rem of padding above and below and none at either side, so it is a real tap target on a phone while staying flush with its column heading.
  • The hairline. The rule between the fine print and the nameplate is currentColor and set wide, so it follows the type wherever your theme puts it and cannot resolve to nothing.

Display type

Off the theme's ladder on purpose, because the size is the composition:

  • h2 at clamp(3.5rem, 13vw, 11rem)
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. Every heading and paragraph carries its own text chain rather than inheriting the band's, because a theme's heading element style beats inheritance and that is how a name ends up the same colour as its ground.
  • 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 nameplate is the one variation, a complete file copied instead of the base. It is the colour axis by inversion: contrast becomes the ground, base becomes every piece of type, the hairline follows the type in currentColor, and nothing else moves.
  • Below 782px the columns stack, so the footer becomes the eyebrow and the orientation line, then the two lists one under the other, then the fine print, the hairline and the name at 56px across the bottom. That is core's stacking, not ours, and it is why the link boxes are sized for a thumb rather than for a mouse.
  • Contrast: every pair is your contrast on your base, or the reverse, which is the pair your theme already ships body copy on. The nameplate is large text and is claimed at 3:1; the eyebrow, the headings, the links and the fine print are held to 4.5:1. Measured per host theme against the resolved values, not the authored chains.

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.

14,147 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|30","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--80);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--30);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"clamp(1.5rem, 3vw, 3rem)"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));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">Architecture, Bristol</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"},"padding":{"right":"max(0rem, 100% - 24rem)"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.15vw, 1.125rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;padding-right:max(0rem, 100% - 24rem);font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.15vw, 1.125rem))">A small practice for houses, gardens and the rooms between them.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"30%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:30%"><!-- wp:heading {"level":3,"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.9375rem)"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:clamp(0.8125rem, 0.95vw, 0.9375rem)">Practice</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":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Our approach</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Selected work</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Journal notes</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Working with us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"30%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:30%"><!-- wp:heading {"level":3,"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.9375rem)"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:clamp(0.8125rem, 0.95vw, 0.9375rem)">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":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Start a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Join the team</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Press enquiries</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Find the studio</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"},"blockGap":{"top":"var:preset|spacing|20","left":"clamp(1.25rem, 3vw, 3rem)"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"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--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1vw, 1rem));letter-spacing:0.01em">© Hallmere Architects. All rights reserved.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0.25rem","left":"clamp(1.25rem, 2.4vw, 2.25rem)"}}}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Privacy notice</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Cookie policy</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"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:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));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 -->

<!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);background-color:currentColor;color:currentColor"/>
<!-- /wp:separator -->

<!-- wp:heading {"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(3.5rem, 13vw, 11rem)"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:0;font-size:clamp(3.5rem, 13vw, 11rem)">Hallmere</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->
Variation: Night nameplate
12,969 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|30","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" 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--30);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"clamp(1.5rem, 3vw, 3rem)"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"40%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%"><!-- 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">Architecture, Bristol</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"},"padding":{"right":"max(0rem, 100% - 24rem)"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1rem, 1.15vw, 1.125rem))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:var(--wp--preset--spacing--30);margin-bottom:0;padding-right:max(0rem, 100% - 24rem);font-size:var(--wp--preset--font-size--medium, clamp(1rem, 1.15vw, 1.125rem))">A small practice for houses, gardens and the rooms between them.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"30%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:30%"><!-- wp:heading {"level":3,"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.9375rem)"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:clamp(0.8125rem, 0.95vw, 0.9375rem)">Practice</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":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Our approach</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Selected work</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Journal notes</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Working with us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"30%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:30%"><!-- wp:heading {"level":3,"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.8125rem, 0.95vw, 0.9375rem)"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:var(--wp--preset--spacing--20);font-size:clamp(0.8125rem, 0.95vw, 0.9375rem)">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":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Start a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Join the team</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Press enquiries</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Find the studio</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|60"},"blockGap":{"top":"var:preset|spacing|20","left":"clamp(1.25rem, 3vw, 3rem)"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"center"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)"><!-- 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 Architects. All rights reserved.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":{"top":"0.25rem","left":"clamp(1.25rem, 2.4vw, 2.25rem)"}}}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Privacy notice</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:transparent;padding-top:1rem;padding-right:0px;padding-bottom:1rem;padding-left:0px">Cookie policy</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"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:var(--wp--preset--color--base, var(--wp--preset--color--white));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 -->

<!-- wp:separator {"className":"is-style-wide","style":{"color":{"background":"currentColor"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);background-color:currentColor;color:currentColor"/>
<!-- /wp:separator -->

<!-- wp:heading {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(3.5rem, 13vw, 11rem)"}}} -->
<h2 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:0;font-size:clamp(3.5rem, 13vw, 11rem)">Hallmere</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->
Back to the library

Continue exploring

Next in Footer

Explore all 6 Footer patterns

Footer ledger rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFooterFooterContactStandard

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.

7 blocks · 1 variationOpen preview Night ledger
Footer sign-off rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFooterFooterCall to actionStandard

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.

8 blocks · 1 variationOpen preview Night sign-off
Footer strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFooterFooterStandard

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.

5 blocks · 1 variationOpen preview Centred strip