Footer
The brochure footer shell — a dark band plus the centred max-width container shared by the Legal and Tech sites. Only the structure is shared; the brand, contact, link columns and legal text are each site's own content. <koala-footer-column> renders one titled link column.
bg-secondary-700
token (passed via class, so no Portal token is baked in); the demo below
uses bg-inverse-surface so it renders on this Portal-token site.Canonical
<koala-footer class="bg-secondary-700">
<div class="md:flex md:justify-between">
<div>…brand + contact…</div>
<div class="grid grid-cols-2 gap-8 sm:grid-cols-3">
<koala-footer-column heading="Explore">
<li><a href="/" class="hover:underline">Home</a></li>
</koala-footer-column>
</div>
</div>
<hr class="my-6 border-gray-600 lg:my-8" />
…bottom bar…
</koala-footer>
Render once in the brochure _Layout. The shell owns the band and the
max-w-screen-xl container; arrange brand, columns and the bottom bar
as child content.
Props
koala-footer| Attribute | Notes |
|---|---|
| class | The band background (and any extra band classes). Brochures pass bg-secondary-700. Omit for a transparent band. |
Do & don't
class — each brochure hands over its own numbered token (bg-secondary-700; bg-inverse-surface stands in on this Portal-token site). The shell stays colour-agnostic.
bg-primary-container band silently breaks the brochure boundary.
Footer column
A titled link column — an h2 heading over a vertical
list. Child content is the <li><a> links. White
heading + gray-300 links are the standard dark-footer scale shared by both brochures.
| Attribute | Notes |
|---|---|
| heading | The column's h2 heading text. |
| class | Per-site layout on the column wrapper (e.g. mt-10 md:mt-0). text-left is always applied. |