[Library] 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. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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.

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 WordPress 6.6 invalidates one.
  • The copyright. A plain paragraph at clamp(0.9375rem, 1vw, 1rem) with its margins cleared, so the flex row decides where it sits.

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.
Notes218 words
  • 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.
Back to the library

Continue exploring

Next in Footer

Explore all 4 Footer patterns