[Library] Footer

Catalogue accessStandard

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. A currentColor hairline then drops to a copyright line and three legal links. Paper ground, contrast type, not inverted. 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

A footer that opens with an ask. Instead of a wordmark over four equal columns of links, the left two thirds carry a tracked eyebrow, a display-size question and one filled button; the right third carries a short heading and a single dense stack of six links. A hairline then drops to the fine print. It sits on the theme's base, not inverted, so it closes a light page without a hard band.

The signature moment

Asymmetry with intent

A wide measure of display type runs against a narrow, dense counterweight, and the two are bottom-aligned so the last link in the stack lands on the button's line. The left column takes 62% and holds three things at three scales: a small tracked eyebrow, a question at up to 60px with tight negative tracking and a 1.0 line-height, and a filled button. The right column takes 30%, leaving an 8% gap beyond the column gutter so the split reads as deliberate rather than as a grid, and holds six links packed at a quarter-rem gap. The left is airy and loud, the right is quiet and packed, and they meet at one baseline.

That survives colourlessness because it is made of proportion, weight and alignment, none of which a theme supplies. The only colours in the section are the theme's own base and contrast, and the only rule is currentColor, so nothing in the design depends on a palette to read.

What it inherits from your theme

  • The typeface. The pattern states no font family anywhere. The question, the links and the fine print all set in your theme's face.
  • Your colours. The ground asks for base and everything on it asks for contrast, the two slugs every stock block theme defines, each with a core default behind it. The filled button asks for the same pair the other way round, so it stays the darkest thing on the section in any theme.
  • Your spacing scale. The band's padding, the column gap, the heading's margins and the space around the hairline are spacing presets.
  • Your button styling. The call to action is a core button, so it takes your theme's button element styles for hover and focus. The links are core buttons too, with their background cleared to transparent, so they read as text while keeping a real tap target.

What it decides for itself

  • The split. 62% against 30%, bottom-aligned. Set both columns to 50% and top-aligned and it becomes an ordinary two-column footer.
  • The type ramp. The eyebrow is 13px to 14px tracked at 0.2em; the question is clamp(2.25rem, 4.6vw, 3.75rem) at weight 700, letter-spacing -0.025em, line-height 1.0; the link heading is 13px to 15px tracked at 0.16em; the fine print is 15px to 16px.
  • The filled button. Contrast ground, base type, square corners, 1rem above and below and 1.75rem at the sides. It carries no typography attribute, so its size is your theme's button size.
  • The link boxes. Each link carries a full rem of padding above and below and none at either side, so it is tappable on a phone at a real box height while staying flush with its heading.
  • The hairline. The rule above the fine print is currentColor and set wide, so it follows the type wherever your theme puts it and cannot resolve to nothing.
  • The fine print row. A wrapping flex group with the copyright line at one end and the legal links at the other.

What to change first

  1. The question. "Got a brief that deserves better?" is 33 characters and holds two lines at the wide measure. A question much longer than about 40 characters wants the clamp() maximum stepping down from 3.75rem.
  2. The button label. "Start a project" ships without a URL. Keep it short; the button is the one filled thing on the section and a long label widens it into a bar.
  3. The six links and their heading. 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.
  4. The eyebrow. "Start a conversation" is the one line above the question. Make it your location, your discipline, or delete it.
  5. The fine print. Replace "Halvard Studio" with your name and point the three legal links at your pages. A fourth link wraps rather than spreads.
  6. The footer's height. The band's top padding is spacing preset 80 and its bottom is 50. Step both down one rung if your theme's scale is generous.
Notes182 words
  • 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: text and the button's ground ask for contrast then black, the section's ground and the button's type ask for base then white. 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.
  • night-signoff is the one variation, and it moves the colour axis only: every chain swaps, so the footer sits on contrast with base type and the button becomes base with contrast type. The markup is otherwise identical.
  • Below 782px the columns stack, so the ask comes first with its button, then the link heading and the six links, then the hairline and the fine print. That is core's stacking, not ours, and it is why the link boxes are sized for a thumb rather than for a mouse.
Back to the library

Continue exploring

Next in Footer

Explore all 4 Footer patterns