Footer with columns

What you can build with it

A site footer with contact details and up to three link columns. A dark footer for a light site, or the reverse. A footer a client can add links to without touching the layout.

Props

brandName, brandHref, logo (image URL, optional), tagline; tone (select: dark, light); phone, phoneHref, email, address (details, each optional); column1Heading and column1Links (repeater: label, url), the same for columns 2 and 3; legal (text); legalLinks (repeater: label, url)

States shown

Link hover (underline, accent) and keyboard focus rings; brand link hover. Columns reflow from three to one by container width.

How to change it

Content and options are 17 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .footer-nav, .site-footer.

ACSS tokens used

base-ultra-dark, text-light, text-light-muted, primary-light, white (dark tone); bg-light, text-dark, text-dark-muted, primary-dark (light tone); heading font family, text-l, text-s, section-space-m, content-width, space-s, space-m, space-l, space-xl, focus tokens

ACSS requirements

ACSS 4 defaults. Nothing to switch on. The dark tone uses the base colour's darkest shade; with colour scheme support on, a dark-mode page inverts it to a light footer, as ACSS intends.

Version history

Version 1.0.0, September 17, 2026: First release.

Tested with

Etch 1.6.7 and ACSS 4.0.1. Version 1.0.0.