---
title: Footer
description: Landing page footer with columns and legal
visibility: guest
draft: false
---

# Footer

A landing page footer with brand, column links, and legal sections.

## Basic Usage

:::preview{title="Simple footer"}
<x-wirekit::footer>
    <x-slot:brand>
        <x-wirekit::text size="sm">Built with WireKit.</x-wirekit::text>
    </x-slot:brand>
</x-wirekit::footer>
:::

## With Columns

:::preview{title="Footer with link columns"}
<x-wirekit::footer>
    <x-slot:columns>
        <div>
            <x-wirekit::heading level="4" size="sm">Product</x-wirekit::heading>
            {{-- gap="sm", not "xs": these are tap targets stacked in a column, and at
                 xs their centers sit 23.4px apart — six tenths of a pixel under the
                 24px WCAG 2.5.8 spacing exception, which is a miss all the same. --}}
            <x-wirekit::stack gap="sm">
                <x-wirekit::link href="#">Features</x-wirekit::link>
                <x-wirekit::link href="#">Pricing</x-wirekit::link>
            </x-wirekit::stack>
        </div>
        <div>
            <x-wirekit::heading level="4" size="sm">Resources</x-wirekit::heading>
            <x-wirekit::stack gap="sm">
                <x-wirekit::link href="#">Documentation</x-wirekit::link>
                <x-wirekit::link href="#">GitHub</x-wirekit::link>
            </x-wirekit::stack>
        </div>
    </x-slot:columns>
    <x-slot:brand>
        <x-wirekit::text size="xs" variant="muted">© 2026 WireKit</x-wirekit::text>
    </x-slot:brand>
</x-wirekit::footer>
:::

## With Legal

:::preview{title="Footer with legal links"}
<x-wirekit::footer>
    <x-slot:brand>
        <x-wirekit::text size="xs" variant="muted">© 2026 Company</x-wirekit::text>
    </x-slot:brand>
    <x-slot:legal>
        <x-wirekit::link href="#" variant="muted">Privacy</x-wirekit::link>
        <x-wirekit::link href="#" variant="muted">Terms</x-wirekit::link>
    </x-slot:legal>
</x-wirekit::footer>
:::

## Entrance Animation

Wire a viewport-triggered reveal directly on the footer without an extra wrapper:

```blade
<x-wirekit::footer animateIn="fade">
    <x-slot:brand>© 2026 Built with WireKit.</x-slot:brand>
</x-wirekit::footer>
```

The `animateIn` prop accepts any of the 11 base presets. Equivalent to wrapping in `<x-wirekit::reveal>` but skips the wrapper element. Respects `prefers-reduced-motion: reduce`. The default duration is `normal` (300ms) — fast enough to feel snappy in a real page-load context.

For docs.wirekit.app preview frame the default 300ms is too quick to read clearly, so the live demo below uses an explicit `<x-wirekit::reveal>` wrapper with `preset="slide-up"` and an inline `animation-duration: 1200ms` so the entrance motion is unambiguously visible. Hit the replay icon in the top-right corner to re-fire it:

:::preview{title="Footer with slow fade entrance reveal"}
<x-wirekit::reveal preset="slide-up-in" trigger="manual" :once="false" duration="slow" x-init="$nextTick(() => window.dispatchEvent(new CustomEvent('wirekit:reveal')))" style="animation-duration: 1200ms;">
    <x-wirekit::footer>
        <x-slot:brand>
            <x-wirekit::text size="xs" variant="muted">© 2026 Built with WireKit.</x-wirekit::text>
        </x-slot:brand>
    </x-wirekit::footer>
</x-wirekit::reveal>
:::

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `animateIn` | string\|null | `null` | Entrance-reveal preset (e.g. `'fade'`, `'slide-up'`). Wires reveal semantics inline. |
| `max` | `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `full` | `xl` | Inner-content max-width tier. Reads `--size-wk-container-*` tokens. Controls the column-grid, brand+legal row, and default slot wrapper widths — they all share the same value. Set to match your page's container width so the footer aligns on the same content-edge spine. |
| `scope` | string\|null | `null` | Scoped personalization name |

The same footer at three `max` tiers — the chrome (background, border) always stays edge-to-edge while the inner content tracks the named tier:

:::preview{title="Footer max — sm / xl / full" wide}
<x-wirekit::footer max="sm">
    <x-slot:brand>Acme · max=sm</x-slot:brand>
    <x-slot:legal>
        <span>Privacy</span>
        <span>Terms</span>
    </x-slot:legal>
</x-wirekit::footer>

<x-wirekit::footer max="xl">
    <x-slot:brand>Acme · max=xl (default)</x-slot:brand>
    <x-slot:legal>
        <span>Privacy</span>
        <span>Terms</span>
    </x-slot:legal>
</x-wirekit::footer>

<x-wirekit::footer max="full">
    <x-slot:brand>Acme · max=full</x-slot:brand>
    <x-slot:legal>
        <span>Privacy</span>
        <span>Terms</span>
    </x-slot:legal>
</x-wirekit::footer>
:::

## Slots

| Slot | Description |
| --- | --- |
| `columns` | Grid of link columns |
| `brand` | Brand/copyright text |
| `legal` | Legal links (privacy, terms) |
| default | Additional footer content |

## Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

## Design Tokens

| Token | Used for |
| --- | --- |
| `--color-wk-bg-elevated` | Footer background |
| `--color-wk-border` | Top border |
| `--color-wk-text-muted` | Text color |
| `--space-wk-section-sm` | Vertical padding |