Classic Three-Column Footer Template

Organize your site's key navigation and information with this timeless three-column footer design.

Ideal for corporate sites, e-commerce stores, and content-rich blogs, this template provides a clear, user-friendly sitemap at the bottom of every page, enhancing navigation and user engagement.

Get Source Code Preview

About this Footer Template

This is the quintessential "workhorse" footer, suitable for a vast range of websites. It features a main section with three columns to neatly organize information, and a separate sub-footer bar below for copyright notices and social media links. This two-part structure creates a clean separation between primary sitemap links and secondary legal/social information.

Features

Classic & Professional Layout: A trusted design pattern that users instantly recognize and know how to use.
Responsive Grid System: Built with CSS Grid, the columns stack vertically on mobile devices for perfect readability and transform into a three-column layout on larger screens.
Brand & Link Sections: The first column is dedicated to your brand's logo and mission, while the other two are perfect for "Quick Links", "Resources", or "Contact" lists.
Detached Sub-Footer: A clean bottom bar handles copyright (using ©) and social media links, keeping the main footer area tidy.
Fully Accessible: Uses semantic HTML, appropriate headings, and accessible names for all icons and logos.
SVG Logo & Icons: Ensures your branding is crisp and scalable on all devices.

Code Breakdown

This template consists of a main footer element which contains two primary children: .footer-classic__main and .footer-classic__bottom.

The .footer-classic__main element is a CSS Grid container. On mobile, its grid-template-columns property is set to 1fr, creating a single column. For screens wider than 768px, a media query updates this property to 2fr 1fr 1fr, creating the classic three-column layout where the first column (for the brand) is twice as wide as the other two.

The .footer-classic__bottom bar uses Flexbox to align its content, stacking items on mobile and arranging them horizontally with justify-content: space-between on larger screens. A general CSS rule (.footer-classic a) ensures all links within the footer share the same text color for consistency.

Accessibility Note on SVG Logos

You'll notice the placeholder svg logo contains a title element. This text is not visible in the browser but is crucial for accessibility. It provides a text alternative for screen readers, just like the alt attribute on an image, ensuring that all users understand the purpose of the graphic.

Code

Here's the full code for the footer template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classic Three-Column Footer</title>
    <style>
        /* 
         * Using CSS variables for easy theming and maintenance.
         * Mobile-first responsive design.
         */
        :root {
            --footer-bg: #222529;
            --footer-text-color: #adb5bd;
            --footer-heading-color: #ffffff;
            --footer-link-color: #adb5bd;
            --footer-link-hover-color: #ffffff;
            --footer-border-color: #3b3f44;
        }

/* Basic body styles for demonstration */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: grid;
            grid-template-rows: 1fr auto;
            min-height: 100vh;
            background-color: #f1f1f1;
        }

.main-content {
            padding: 2rem;
        }

/* FOOTER STYLES START HERE */

.footer-classic {
            background-color: var(--footer-bg);
            color: var(--footer-text-color);
            padding: 3rem 1.5rem;
        }

.footer-classic__container {
            max-width: 1140px;
            margin: 0 auto;
        }

/* General link styling for the entire footer */
        .footer-classic a {
            color: var(--footer-link-color);
            text-decoration: none;
            transition: color 0.2s ease-in-out;
        }

.footer-classic a:hover {
            color: var(--footer-link-hover-color);
            text-decoration: underline;
        }
        
        /* Prevent underline on logo */
        .footer-classic__brand .logo:hover {
            text-decoration: none;
        }

.footer-classic__main {
            display: grid;
            /* Mobile-first: single column */
            grid-template-columns: 1fr;
            gap: 2rem;
            padding-bottom: 2rem;
            border-bottom: 1px solid var(--footer-border-color);
        }

.footer-classic__brand .logo {
            display: block;
            width: 150px;
            margin-bottom: 1rem;
        }

.footer-classic__brand .logo path {
            fill: var(--footer-heading-color);
            transition: fill 0.2s ease-in-out;
        }

.footer-classic__brand .logo:hover path {
            fill: var(--footer-link-hover-color);
        }

.footer-classic__brand p {
            font-size: 0.875rem;
            line-height: 1.5;
            margin: 0;
        }

.footer-classic__heading {
            font-size: 1rem;
            font-weight: 600;
            color: var(--footer-heading-color);
            margin-top: 0;
            margin-bottom: 1rem;
        }

.footer-classic__links ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .footer-classic__links li {
            margin-bottom: 0.75rem;
        }

.footer-classic__bottom {
            padding-top: 2rem;
            font-size: 0.875rem;

/* Mobile-first: stack items and center them */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            text-align: center;
        }

.footer-classic__copyright {
            margin: 0;
        }

.footer-classic__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }
        
        /* Remove underline from social icons */
        .footer-classic__social a:hover {
            text-decoration: none;
        }

.footer-classic__social svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

/* Media query for tablets and larger */
        @media (min-width: 768px) {
            .footer-classic__main {
                /* Three-column layout for larger screens */
                grid-template-columns: 2fr 1fr 1fr;
                gap: 3rem;
            }
            
            .footer-classic__bottom {
                /* Arrange bottom items horizontally */
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
            }
        }
    </style>
</head>
<body>

<main class="main-content">
        <h1>Classic Three-Column Footer</h1>
        <p>This area represents the main content of your website.</p>
    </main>
    
    
    <footer class="footer-classic" role="contentinfo">
        <div class="footer-classic__container">
            <div class="footer-classic__main">
                
                
                <div class="footer-classic__brand">
                    <a href="#" class="logo" aria-label="Your Company Homepage">
                        
                        <svg viewBox="0 0 100 40" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logoTitle">
                            <title id="logoTitle">Your Brand Logo</title>
                            <path d="M0 0 H100 V40 H0 Z M10 10 H90 V30 H10 Z"></path>
                        </svg>
                    </a>
                    <p>
                        Providing high-quality solutions and templates to empower creators and developers around the world.
                    </p>
                </div>

<div class="footer-classic__links">
                    <h3 class="footer-classic__heading">Company</h3>
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Our Team</a></li>
                        <li><a href="#">Careers</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>

<div class="footer-classic__links">
                    <h3 class="footer-classic__heading">Resources</h3>
                    <ul>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Help Center / FAQ</a></li>
                        <li><a href="#">Press Kit</a></li>
                        <li><a href="#">Case Studies</a></li>
                    </ul>
                </div>

</div>
            <div class="footer-classic__bottom">
                
                <p class="footer-classic__copyright">
                    Â© 2024 Your Company. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
                </p>

<nav class="footer-classic__social" aria-label="Social Media">
                    <ul>
                        <li><a href="#" aria-label="Our Facebook Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><title>Facebook</title><path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.35C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg></a></li>
                        <li><a href="#" aria-label="Our Twitter Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.223.085 4.93 4.93 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a></li>
                        <li><a href="#" aria-label="Our LinkedIn Profile"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/></svg></a></li>
                    </ul>
                </nav>

</div>
        </div>
    </footer>

</body>
</html>

View Output