Footer

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

Basic Usage

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>

The link columns use gap="sm" rather than xs, and the reason is a measurement worth carrying: these are tap targets stacked in a column, and at xs their centers sit 23.4 px apart — six tenths of a pixel under the 24 px WCAG 2.5.8 spacing exception, which is a miss all the same.

Footer with link columns

<x-wirekit::footer>
    <x-slot:columns>
        <div>
            <x-wirekit::heading level="4" size="sm">Product</x-wirekit::heading>
            <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" intent="muted">© 2026 WireKit</x-wirekit::text>
    </x-slot:brand>
</x-wirekit::footer>

With Legal

Footer with legal links

<x-wirekit::footer>
    <x-slot:brand>
        <x-wirekit::text size="xs" intent="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>

Help in the same place on every page

A footer comes back on every page, so it is a natural home for help: contact details, a link to your help center or your support form. Help that your pages repeat has to stand in the same place on each of them (WCAG 3.2.6), and a footer every page shares gives it that place. Keep the help links in the same column, in the same order, rather than in the content of some pages and the footer of others.

Entrance Animation

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

<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:

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" intent="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:

Footer max — sm / xl / full

<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>