A footer is where a page stops: who made it, where else a reader can go, and the small print
that has to be reachable from everywhere. Its columns are data rather than markup, so the same
footer renders on every page of a site from one description, and every destination renders
through the framework's link primitive.

It renders nothing it was not given. A page with a copyright line and no navigation gets a
one-line footer, not three empty columns.

```tsx demo="navigation/footer-preview"
```

## Usage

```tsx
import { Footer } from "@asheeui/web";

<Footer
  brand="Ashee SMS"
  description="Campaign messaging for growing teams."
  groups={[
    { title: "Product", links: [{ label: "Campaigns", href: "/campaigns" }] },
    { title: "Company", links: [{ label: "About", href: "/about" }] },
  ]}
  copyright="Ashee Softworks"
/>;
```

## Columns

A group is a `title` and its `links`; a link is `label`, `href` and its state. `icon` puts
content before the label and `isExternal` marks a destination that leaves the site, which the
link primitive renders with the attributes and the affordance an off-site destination needs.
`id` is optional on both and defaults to the position in the list.

```tsx demo="navigation/footer-columns"
```

Each group is its own `navigation` landmark named by its title, so a reader who wants the
developer links can jump to that column instead of walking the whole band. The title is also a
heading, so the columns appear in the page's outline. A destination can state the component
that renders it, per link or for the whole footer through `link`; the more specific statement
wins, as [links and substitution](/concepts/substitution) describes.

On the platform the same groups stack and wrap rather than becoming a row at a breakpoint,
which is what a footer read by scrolling a phone wants. See [React Native](/platforms/native).

## The bottom row

`copyright`, `legal` and `social` share a lower row: the copyright line beside a named row of
legal links and a named row of social ones. `newsletter` is a slot in the brand column, so a
signup form sits under the product's name instead of in the small print.

```tsx demo="navigation/footer-bottom"
```

The band's surface is `variant`: `solid` is the page background, `muted` is a subdued band and
`bordered` is the page background with a separator above it, the registered default, because a
footer is usually the end of a long page and needs to be told apart from it. `spacing` is the
vertical padding, taken from the shared space scale.

## Props

```props Footer
```

Four options are registered by the component: `variant` is `bordered`, `spacing` is `lg`,
`contained` is `true` and `containerSize` is `lg`. Each resolves from the instance, then from
`components.footer`, then from the registration, so a product that always ends on a muted band
states it once. The footer does not read `defaultRadius` or `defaultVariant`: a footer is a band,
not a control, so the button vocabulary does not apply to it.

## Accessibility

- The element is a `<footer>` by default, which is the `contentinfo` landmark when it is the
  page's last band. `as` changes the element without changing what the footer holds.
- Each group is a `navigation` landmark named by its `title`, and the title is rendered as a
  heading, so the columns are reachable and findable at once. The legal and social rows are named
  landmarks too: `legalLabel` and `socialLabel`, `Legal` and `Social` by default, because a
  landmark name is page furniture and has to be translatable.
- The copyright line is plain text, so it is read as a statement rather than offered as a
  control.
- An `isExternal` destination is given the target and relationship attributes it needs and the
  affordance that says it leaves the site, so a reader is told where it goes before pressing it.

Every link is drawn by the framework's link primitive, so the page keeps its own element for
them: see [links and substitution](/concepts/substitution).

## Related

```related navbar, link, breadcrumb
```