Footer cover colophon

A footer set on a full-bleed core/cover: a heavy veil of your theme's contrast colour over a photograph, a display-size sign-off high on it with an outlined contact button, four short link columns lower down, and along the very floor a hairline and the small print. It is the last section on the page, so it ships with nothing below it.

Footers are usually a flat band of links, the page trailing off into admin. This one closes on an image, the same weight as a page opener, and puts the largest words on it at the top: "Start something with us." at up to 160px, two lines at every width. Below it the density climbs as the type shrinks: twelve links in four columns, then a single rule and one line of small print at the floor. Loud and open at the top, quiet and packed at the bottom; the scale collision holds in greyscale.

• Sign-off at the floor: the order turns over. The link columns open the cover and the sign-off lands at its foot, directly on the hairline, so the last words on the page are the biggest.

Inherits: every colour (veil contrast, type, links and rule base; the navigation links inherit the cover's base, and the contact button tries role-link first), the typeface, the spacing scale and the button size. Decides: the veil's opacity, the type ramp, the minimum height and the outline on the contact button, which is currentColor over a transparent ground so it reads on the veil whatever your theme's button colours are. The cover states its own text colour chain so core's #fff default never applies.

Type sits on the image only because the veil makes the ground known: contrast at dimRatio 80 under base type. The links and small print are body size and need the full 4.5:1; the checker composites the veil over a white and a black photograph and the worse ground has to pass. Lower the veil below 80 and that stops being true.

• The sign-off is display: a bare clamp(2.75rem, 9vw, 10rem), off the theme's ladder, because its size is the composition. It is an h2; the page already has its h1.
• The column labels are paragraphs, weight 600 tracked at 0.08em, on a label clamp() floored at 15px, trying role-label before base. The links are core/navigation blocks (overlayMenu: never), one per column and one for the legal row, so the footer's links are real navigation landmarks; column links take medium, the legal links the label size. The address line, the copy beside the contact button and the small print state their own sizes, none under 15px.
• Hierarchy comes from size and position alone: nothing is set in capitals.
• Every heading states its size and colour chain and nothing else.

• The cover keeps its default layout and position; its side padding is max(clamp(1.25rem, 4vw, 4rem), calc((100% - 1320px) / 2)), so the content holds a 1320px measure and the photograph runs edge to edge.
• Inside, one vertical flex group with a minimum height of clamp(36rem, 52vw, 62rem) (never vh) and space-between: the sign-off at the top, the columns and the floor at the foot.
• The link columns are a wrapping flex row, each column filling its share: four across from tablet width, two by two on a phone.
• Every gap is a spacing preset. The rule is currentColor, set wide, so it is always the colour of the type.

The photograph: choose Replace on the cover. Then the sign-off, kept to about four words; a line break (Shift+Enter) holds it to two lines at every width, so move the break with the words. Then the address line, and the contact button's link. The links ship pointing at #; edit each navigation block's links in place, or pick one of your menus in its settings. A fifth column wraps rather than squeezes.

The copied markup includes a WordPress Photo Directory example photograph, dusk clouds over the sea. The public image URL keeps the example visible after pasting. Select the cover and choose Replace to use your own Media Library file. See image credits for the source and license. Pasting an image URL does not import a Media Library attachment.