Footer

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add footer

Image overlay#

Variant 2 makes the image the protagonist: a full-bleed photo sits behind the nav, the link columns ride on top, and a minimal copyright and legal bar closes it at the bottom-left. A top-and-bottom scrim darkens the edges so the white text reads over the brighter middle of the image. Swap the <img> src for your own illustration or a next <Image>; the column titles, links, and copyright are already set white.

Newsletter signup#

Variants 3 to 5 capture email with the canonical NewsletterForm, not a hand-rolled input. Variant 3 leads the footer with its inline layout (a single signup row over a wide link grid); Variant 4 anchors the right with its card layout (heading, lead, and fine print on its own concentric surface); Variant 5 centers the inline form under a minimal nav. Each ships the loading-to-success flow out of the box, so dropping one in just works; wire onSubscribe to your API.

Responsive#

The link columns sit beside (or above) the brand on desktop and stack as the frame narrows, while the bottom bar wraps its copyright and legal links. The overlay variant folds its five columns from a single row to three, then two, and the scenic band keeps the image footprint at every width. The newsletter strip drops its signup under the lede, and the newsletter card moves below the columns. Resize the preview to watch each fold to mobile.

FAQ#