Skip to main content
Exit fullscreen Esc

Footer

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

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

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.

Footer — 4-Column

Product

Features Pricing Changelog Documentation

Company

About Blog Careers Contact

Resources

Guides Community Support Status

Legal

Privacy Terms License

© 2026 Your Company. All rights reserved.

Twitter GitHub LinkedIn 
<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>

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.

Footer — Centered Simple
Docs Pricing Blog Support

© 2026 Your Company. MIT Licensed. 

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