---
title: Footer Partial
description: Page footers with navigation links, branding, and optional newsletter signup.
visibility: guest
draft: false
---

# Footer

Page footers with navigation links, branding, and optional newsletter signup.

**Composed from:** `container`, `divider`, `grid`, `heading`, `link`, `row`, `section`, `stack`, `text`.

## 4-Column Footer

Full footer with one column per content area — Product, Company, Resources, Legal — and a bottom bar with copyright + social-icon row. Best for sites with a substantial sitemap.

:::preview{title="Footer — 4-Column" wide}
<x-wirekit::section padding="xl" divider="top">
    <x-wirekit::container max="xl">
        <x-wirekit::stack gap="xl">
            <x-wirekit::grid cols="1 sm:2 lg:4" gap="lg">
                <x-wirekit::stack gap="sm">
                    <x-wirekit::heading level="3" size="sm">Product</x-wirekit::heading>
                    <x-wirekit::stack gap="xs">
                        <x-wirekit::link href="#">Features</x-wirekit::link>
                        <x-wirekit::link href="#">Pricing</x-wirekit::link>
                        <x-wirekit::link href="#">Changelog</x-wirekit::link>
                        <x-wirekit::link href="#">Documentation</x-wirekit::link>
                    </x-wirekit::stack>
                </x-wirekit::stack>
                <x-wirekit::stack gap="sm">
                    <x-wirekit::heading level="3" size="sm">Company</x-wirekit::heading>
                    <x-wirekit::stack gap="xs">
                        <x-wirekit::link href="#">About</x-wirekit::link>
                        <x-wirekit::link href="#">Blog</x-wirekit::link>
                        <x-wirekit::link href="#">Careers</x-wirekit::link>
                        <x-wirekit::link href="#">Contact</x-wirekit::link>
                    </x-wirekit::stack>
                </x-wirekit::stack>
                <x-wirekit::stack gap="sm">
                    <x-wirekit::heading level="3" size="sm">Resources</x-wirekit::heading>
                    <x-wirekit::stack gap="xs">
                        <x-wirekit::link href="#">Guides</x-wirekit::link>
                        <x-wirekit::link href="#">Community</x-wirekit::link>
                        <x-wirekit::link href="#">Support</x-wirekit::link>
                        <x-wirekit::link href="#">Status</x-wirekit::link>
                    </x-wirekit::stack>
                </x-wirekit::stack>
                <x-wirekit::stack gap="sm">
                    <x-wirekit::heading level="3" size="sm">Legal</x-wirekit::heading>
                    <x-wirekit::stack gap="xs">
                        <x-wirekit::link href="#">Privacy</x-wirekit::link>
                        <x-wirekit::link href="#">Terms</x-wirekit::link>
                        <x-wirekit::link href="#">License</x-wirekit::link>
                    </x-wirekit::stack>
                </x-wirekit::stack>
            </x-wirekit::grid>
            <x-wirekit::divider />
            <x-wirekit::row align="center" justify="between" gap="md" wrap>
                <x-wirekit::text size="sm" intent="muted">&copy; 2026 Your Company. All rights reserved.</x-wirekit::text>
                <x-wirekit::row gap="md">
                    <x-wirekit::link href="#" size="sm" variant="muted">Twitter</x-wirekit::link>
                    <x-wirekit::link href="#" size="sm" variant="muted">GitHub</x-wirekit::link>
                    <x-wirekit::link href="#" size="sm" variant="muted">LinkedIn</x-wirekit::link>
                </x-wirekit::row>
            </x-wirekit::row>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Centered Simple Footer

Minimal footer for smaller sites — single row of nav links above a copyright line. Drop into the bottom of any layout when a four-column structure is too much.

:::preview{title="Footer — Centered Simple"}
<x-wirekit::section padding="lg" divider="top">
    <x-wirekit::container max="lg">
        <x-wirekit::stack gap="sm" align="center">
            <x-wirekit::row gap="md" justify="center">
                <x-wirekit::link href="#">Docs</x-wirekit::link>
                <x-wirekit::link href="#">Pricing</x-wirekit::link>
                <x-wirekit::link href="#">Blog</x-wirekit::link>
                <x-wirekit::link href="#">Support</x-wirekit::link>
            </x-wirekit::row>
            <x-wirekit::text size="sm" intent="muted">&copy; 2026 Your Company. MIT Licensed.</x-wirekit::text>
        </x-wirekit::stack>
    </x-wirekit::container>
</x-wirekit::section>
:::

## Related

- [Navbar component](/components/navbar) — top navigation