# SiteFooter

> Site footer for landing and product pages: a brand block, titled link columns that never leave a short last row, optional newsletter and social slots, a legal row and a full-width brand wordmark that closes the page.

```ts
import { SiteFooter } from "@sdxc/ui/landing";
```

Renders the page footer: a measured column holding an optional newsletter band, the
brand block beside or above the link columns, the legal row, then the wordmark. Column
counts per row derive from `columns.length` at every container step, so 3 or 5
columns never strand one alone on a row.

## Examples

```tsx
<SiteFooter
	brand={<a href="/" aria-label="Keel home"><KeelLogo /></a>}
	tagline={t("footer.tagline")}
	columns={[{ title: t("footer.product"), links: [{ label: t("footer.pricing"), href: "/pricing" }] }]}
	legal={<p>© 2026 Keel</p>}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `brand?` | `RemixNode` | The brand mark, usually a home link wrapping the logo. |
| `tagline?` | `RemixNode` | One or two lines under the brand mark in the muted ink. |
| `columns` | `Column[]` | Link columns; any count lays out without a short last row. |
| `newsletter?` | `RemixNode` | A newsletter form the page supplies, placed by `newsletterPlacement`. |
| `newsletterPlacement?` | `"column" \| "band"` | Defaults to DEFAULT_NEWSLETTER_PLACEMENT. |
| `social?` | `RemixNode` | Icon links with an `aria-label` each. The footer sizes every direct child to a 1.25rem glyph inside a 44px hit area on a phone, 36px from the `md` container. |
| `legal?` | `RemixNode` | The bottom row: copyright and legal links, with `social` at its inline end. |
| `wordmark?` | `RemixNode` | A brand wordmark, usually an SVG, drawn full width in the brand ink as the last thing on the page and hidden from assistive technology. |
| `label?` | `RemixNode` | Visually hidden heading naming the footer in the outline. Defaults to DEFAULT_LABEL. |
| `level?` | `HeadingLevel` | Level of that hidden heading; column titles render one below it. Defaults to one below the ambient `HeadingScope`, so a footer on a bare page opens with `<h2>`. |
| `ruled?` | `boolean` | Draws the hairline along the footer's top edge. Defaults to `true`. |
| `prefetch?` | `LinkPrefetch` | When the column links start loading their pages. Defaults to `"none"`; `"intent"` warms a destination as the visitor hovers or focuses it. |

Also accepts everything in `Omit<TagProps<"footer">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `NewsletterPlacement` | `"column" \| "band"` | Where the newsletter slot sits: under the tagline in the brand block, or as a full band above the brand block and the columns. |