HTML

Multi-Column Footer

admin by @admin ADMIN
1h ago
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
Standard site footer with grouped links, brand block, social icons, and legal/copyright. Use semantic `<nav aria-label>` on each column so screen readers announce the section labels.
HTML
Raw
<footer class="site-footer">
    <div class="footer-grid">
        <div class="footer-brand">
            <img src="/logo.svg" alt="Example" width="32" height="32">
            <p>Save what you build. Search it later.</p>
        </div>

        <nav aria-label="Product">
            <h4>Product</h4>
            <ul>
                <li><a href="/features">Features</a></li>
                <li><a href="/pricing">Pricing</a></li>
                <li><a href="/changelog">Changelog</a></li>
            </ul>
        </nav>

        <nav aria-label="Company">
            <h4>Company</h4>
            <ul>
                <li><a href="/about">About</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/careers">Careers</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </nav>

        <nav aria-label="Legal">
            <h4>Legal</h4>
            <ul>
                <li><a href="/terms">Terms</a></li>
                <li><a href="/privacy">Privacy</a></li>
                <li><a href="/security">Security</a></li>
            </ul>
        </nav>
    </div>

    <div class="footer-bottom">
        <small>© 2025 Example Inc. · All rights reserved.</small>
        <ul class="footer-social">
            <li><a href="https://twitter.com/example" aria-label="Twitter">𝕏</a></li>
            <li><a href="https://github.com/example" aria-label="GitHub">GH</a></li>
        </ul>
    </div>
</footer>
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.