Pattern Paste
Subscribe

Core Patterns Footer

Catalogue accessStandard

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.

On a phone the line wraps into a stack and the rule is still the mark.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The name. Replace "Hallmere" with your site name.
  2. The five links. They ship without URLs.
  3. The copyright. Change the year and the name.
  4. The weight of the rule. The 4px top border is the signature.
  5. The band's height. Top and bottom padding are spacing preset 40.

The signature moment

A heavy rule over one dense line

The whole footer is one line under a rule thick enough to read as a mark, not a divider. Every other footer in the catalogue is tall; this one is density contrast, a page's worth of content above and then a single packed line at the end, with the 4px bar as the structural mark that says the page has stopped. Both survive colourlessness: the line is proportion and the bar is currentColor, so the rule is always the same colour as the type beside it, whatever that type is in your theme. Nothing in it depends on a palette.

Theme handoff

What comes from where

From your theme

  • Your typeface.
  • Your colours.
  • Your spacing scale.
  • Your link and button styling.

Set by this pattern

  • The rule.
  • Full bleed with its own measure.
  • The one line.
  • The name.
  • The link boxes.
  • The copyright.

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

The smallest footer that still closes a page. A 4px rule in currentColor runs the full width of the viewport, and under it one short band on your base colour holds three things on a single line: the site name at the left, a run of five links in the middle, the copyright at the right. There are no columns, no headings and no second row. It is for the site whose footer has nothing to say beyond "this is who we are, here is where else to go".

The signature moment: a heavy rule over one dense line

The whole footer is one line under a rule thick enough to read as a mark, not a divider. Every other footer in the catalogue is tall; this one is density contrast, a page's worth of content above and then a single packed line at the end, with the 4px bar as the structural mark that says the page has stopped. Both survive colourlessness: the line is proportion and the bar is currentColor, so the rule is always the same colour as the type beside it, whatever that type is in your theme. Nothing in it depends on a palette.

Make it yoursVariations and the edits to make first

What to change first

  1. The name. Replace "Hallmere" with your site name. It is uppercase and tracked, so a name much longer than about twelve characters will start to crowd the links at 1024px; shorten it or drop the tracking.
  2. The five 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. Add a sixth and the run wraps inside its own row before the row itself wraps.
  3. The copyright. Change the year and the name. It is the one line a visitor reads, so it keeps a 15px floor.
  4. The weight of the rule. The 4px top border is the signature. Step it to 3px in a theme with a fine typeface if it feels heavy; do not take it to 1px, because then this is a hairline footer and there is a better one in the catalogue for that.
  5. The band's height. Top and bottom padding are spacing preset 40. Step them to 50 if your theme's scale is tight and the line feels pinched under the rule.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits from your theme

  • Your typeface. The name, the links and the copyright state no family. The name is set in whatever your theme gives an h2, at a footer size rather than a heading size.
  • 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 strip falls back to white and black.
  • Your spacing scale. The band's top and bottom padding are spacing preset 40, and the vertical gap between rows when the line wraps is preset 20, so a theme with a generous scale gets a slightly taller strip without you editing anything.
  • Your link and button styling. Every link is a core button with its background cleared and its text set back to the band's, so it takes your theme's button element styles, including hover and focus, while reading as plain text.

What it decides for itself

  • The rule. The outer group carries a 4px solid top border in currentColor. The weight is the point: at 1px it is a hairline like every other footer's, and at 4px it is the mark the section is built around. It spans the viewport because the group is full width.
  • Full bleed with its own measure. The band spans the viewport and holds its content to 1240px, so the line reads against the page edge and not against a column.
  • The one line. The inner group is a wrapping flex row with its three children spread to the edges and centred vertically, so the name, the link run and the copyright share one baseline band at desktop widths.
  • The name. Uppercase, weight 700, a small positive tracking of 0.04em and a line-height of 1, sized clamp(1.125rem, 1.4vw, 1.375rem). It is a wordmark at label scale, not a display heading.
  • The link boxes. Each link carries a full rem of padding above and below and none at either side, so it is comfortably tappable on a phone while sitting flush with its neighbours. Buttons carry no typography attribute, because one does not stay valid across editor versions.
  • The copyright. A plain paragraph at clamp(0.9375rem, 1vw, 1rem) with its margins cleared, so the flex row decides where it sits.
Technical notesBlock mechanics, responsive behaviour and constraints

Styled look: Navy and sky

The bottom that matches Nav bar in Navy and sky: the same one line on a #13294b navy ground in #ffffff type, under a 4px #bcd7f2 sky rule instead of a currentColor one, set in Avenir Next falling to Helvetica and Arial, with a heating engineer's links and Gas Safe number as the sample copy.

Notes

  • Core blocks only: group, heading, buttons, button, paragraph. No separator: the rule is the outer group's own border. No plugin, nothing to keep updated.
  • Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the strip can resolve to nothing. The rule is currentColor and needs no chain.
  • 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.
  • This footer has no columns, so core's stacking below 782px never fires. What happens instead is the flex row wrapping: as the width closes, the copyright drops to a second row first, then the link run wraps inside itself, and at 390px the strip is a left-aligned stack of name, links and copyright with a preset-20 gap between rows. The heavy rule is the mark that survives the wrap: it is the same bar at every width, and it is what still makes the stack read as a footer rather than as a list.
  • The centred variation (strip-centred) keeps both chains and the rule and changes only the composition: the three children stack and centre at every width, the link run centred as a row that wraps from the middle.

Questions

Footer strip: common questions

Does Footer strip need a plugin?

No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Footer strip match my theme?

Choose by variation. One line and Centred strip take your theme’s palette; Navy and sky brings its own colours.

How many variations does Footer strip have?

3: One line, Navy and sky and Centred strip. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Footer strip free?

It is included with a subscription, with every Core Pattern and variation. 62 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.

The markup

5.3KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Subscribe to copy it, £49 a yearWhat you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns