Footer « Layout Primitives

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>

With Columns

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

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:

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

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>

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

Was this page helpful?

What was missing? (optional)

Voting requires cookies or local storage. What we store