Footer nameplate, Pattern Paste Canonical: https://patternpaste.com/pattern/footer-nameplate.html Library (https://patternpaste.com/patterns/) Footer (https://patternpaste.com/patterns/footer/) Free Standard # 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. Start here ## What to change first - The nameplate. Replace "Hallmere" with your site name. - The eyebrow and the orientation line. "Architecture, Bristol" and the one sentence under it are the only copy in the left column. - The two link lists and their headings. They ship without URLs. - The fine print. The copyright line and the three legal links sit above the hairline. - 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 - 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. - 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. - 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. - 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. - 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. Back to the library (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 CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. States no colour and no font of its own. (https://patternpaste.com/pattern/cta-band.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 6.7 to 7.0. 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/) #### What's inside Blocks button, buttons, column, columns, group, heading, paragraph, separator Core only yes Chains 38, deepest 3 rungs currentColor yes color base, black, contrast, role-label, role-link, white spacing 20, 30, 50, 60, 80 font-size medium Continue exploring ## Next in Footer Explore all 6 Footer patterns (https://patternpaste.com/patterns/footer/) Shot in Twenty Twenty-Five Footer Footer Contact 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. 7 blocks · 1 variation Open preview (https://patternpaste.com/pattern/footer-ledger.html) Night ledger (https://patternpaste.com/pattern/footer-ledger.html#variant=night-ledger) Shot in Twenty Twenty-Five Footer Footer Call to action 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. 8 blocks · 1 variation Open preview (https://patternpaste.com/pattern/footer-signoff.html) Night sign-off (https://patternpaste.com/pattern/footer-signoff.html#variant=night-signoff) Shot in Twenty Twenty-Five Footer Footer Standard ### 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 variation Open preview (https://patternpaste.com/pattern/footer-strip.html) Centred strip (https://patternpaste.com/pattern/footer-strip.html#variant=strip-centred)