Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
BrochureFooter

Footer

The brochure footer shell: a full-width band and a centred content container, with titled link columns inside.

<koala-footer>

Band and columns

Only the structure is shared. The band's colour comes from the caller's class, and everything inside, from the contact details to the legal small print, is child content. koala-footer-column draws a heading over a list of the caller's <li><a> links, in the light-on-dark colours both brochures use.

The Legal and Tech sites paint the band in their plum bg-secondary-700, which the Design site does not define. This example wraps the footer in a force-dark island and uses bg-surface, so it stays dark in both themes as the real band does.

Street map

map draws a street-map image faintly behind the footer in its own ink colour, fading out towards the edges, and the caller's own <a koala-footer-pin> link becomes the bobbing, pulsing pin at its centre from md up, with a plain dot on phones. The brochures use an OpenStreetMap drawing of the streets around Sellers Wheel with the koala mark as the pin, and credit OpenStreetMap in the small print. The example above shows both.

API

class the band's background, e.g. bg-secondary-700 on the brochures
map image URL
koala-footer-pin on the caller's own a, a direct child of the footer
koala-footer-pin image image URL
koala-footer-column heading text
koala-footer-column class merged onto the column, e.g. mt-10 md:mt-0