Illustrated Brand Footer Template

Add a touch of personality and charm to your website with this illustration-focused footer.

Perfect for SaaS companies, creative agencies, and any brand with a friendly identity (think Mailchimp or Duolingo), this template uses custom artwork to create a memorable and delightful end to your page.

Screenshot of a footer with a large, friendly character illustration on the right and footer links on the left.

Get Source Code Preview

About this Illustrated Footer Template

This footer template moves beyond standard text links to incorporate brand personality directly into the design. The layout reserves significant space for a large illustration, which can be a brand mascot, a conceptual drawing, or any artwork that reflects your identity. This visual element makes the footer more engaging and helps your brand stick in the user's mind. The template also includes a clean, organized section for essential navigation and a separate bar for legal information.

Features

Illustration-Forward Design: A large, dedicated space to showcase your custom brand artwork.
Friendly & Memorable: The use of illustration creates a warm, approachable, and unique feel.
Clean Organization: A two-column grid separates the links from the illustration, and a sub-footer handles legal text.
Responsive Layout: The illustration is hidden on small mobile screens to save space and prioritize links, then revealed on larger screens.
Easy to Customize: The placeholder illustration is a simple SVG that can be easily replaced with your own artwork file.

Ideal Use Cases

SaaS companies with a friendly, user-centric brand.
Creative and marketing agencies.
Educational websites or apps for children.
Any brand that uses a mascot or custom illustration style.

Code Breakdown

The main section, .footer-illustrated__main, is a CSS Grid container. On mobile, it's a single column. A media query for screens larger than 992px changes it to a two-column layout, dedicating one column to the link lists and the other to the .footer-illustrated__artwork div. The artwork itself is hidden by default (display: none) and then made visible (display: block) inside this media query, which is a common pattern for optimizing layouts on small screens.

The .footer-illustrated__bottom bar uses Flexbox to cleanly align the copyright notice and social links.

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>Illustrated Brand Footer</title>
    <style>
        :root {
            --footer-bg: #fdf6e3; /* A warm, friendly background color */
            --footer-text: #586e75;
            --footer-heading: #073642;
            --footer-link-hover: #cb4b16;
            --footer-border: #eee8d5;
        }

/* Basic body styles */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        main {
            flex-grow: 1;
        }

.container {
            width: 90%;
            max-width: 1140px;
            margin-left: auto;
            margin-right: auto;
        }

.main-content {
            padding: 2rem 0;
        }

/* FOOTER STYLES START HERE */
        
        .footer-illustrated {
            background-color: var(--footer-bg);
            color: var(--footer-text);
            padding-top: 3rem;
            font-size: 0.95rem;
            line-height: 1.6;
            overflow: hidden; /* Contains the illustration */
        }

.footer-illustrated__main {
            display: grid;
            grid-template-columns: 1fr; /* Mobile-first */
            gap: 2rem;
            align-items: flex-end; /* Aligns items to the bottom */
        }

.footer-illustrated__links-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }

.footer-illustrated__links h3 {
            color: var(--footer-heading);
            font-size: 1.1rem;
            margin: 0 0 1rem 0;
        }
        .footer-illustrated__links ul { margin: 0; padding: 0; list-style: none; }
        .footer-illustrated__links li:not(:last-child) { margin-bottom: 0.75rem; }
        .footer-illustrated__links a { color: var(--footer-text); text-decoration: none; }
        .footer-illustrated__links a:hover { color: var(--footer-link-hover); text-decoration: underline; }

/* The illustration is hidden on small screens to save space */
        .footer-illustrated__artwork {
            display: none;
        }
        .footer-illustrated__artwork svg {
            display: block;
            width: 100%;
            max-width: 250px;
            height: auto;
            margin-left: auto;
        }

.footer-illustrated__bottom {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--footer-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            text-align: center;
            font-size: 0.9em;
        }
        
        .footer-illustrated__copyright { margin: 0; }
        .footer-illustrated__social ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }
        .footer-illustrated__social a { color: var(--footer-text); transition: color 0.2s; }
        .footer-illustrated__social a:hover { color: var(--footer-heading); }
        .footer-illustrated__social svg { width: 20px; height: 20px; fill: currentColor; }

@media (min-width: 600px) {
            .footer-illustrated__links-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        @media (min-width: 992px) {
            .footer-illustrated__main {
                grid-template-columns: 2fr 1fr;
            }
            .footer-illustrated__artwork {
                display: block; /* Show illustration on larger screens */
            }
            .footer-illustrated__bottom {
                flex-direction: row;
                justify-content: space-between;
            }
        }
    </style>
</head>
<body>
    <main>
        <div class="container main-content">
            <h1>Illustrated Brand Footer</h1>
            <p>A footer that showcases brand personality.</p>
        </div>
    </main>

<footer class="footer-illustrated" role="contentinfo">
        <div class="container">
            <div class="footer-illustrated__main">
                <div class="footer-illustrated__links-container">
                    <div class="footer-illustrated__links">
                        <h3>Product</h3>
                        <ul>
                            <li><a href="#">Features</a></li>
                            <li><a href="#">Pricing</a></li>
                            <li><a href="#">Integrations</a></li>
                            <li><a href="#">API</a></li>
                        </ul>
                    </div>
                    <div class="footer-illustrated__links">
                        <h3>Company</h3>
                        <ul>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Jobs</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                    <div class="footer-illustrated__links">
                        <h3>Support</h3>
                        <ul>
                            <li><a href="#">Help Center</a></li>
                            <li><a href="#">Status</a></li>
                            <li><a href="#">Terms of Service</a></li>
                            <li><a href="#">Privacy Policy</a></li>
                        </ul>
                    </div>
                </div>
                <div class="footer-illustrated__artwork">
                    
                    <svg role="img" viewBox="0 0 200 150">
                        <title>Friendly Brand Mascot</title>
                        <path fill="#d1e8ff" d="M0 75h200v75H0z"/>
                        <circle fill="#ffc107" cx="100" cy="75" r="50"/>
                        <path fill="#fff" d="M125 75a25 25 0 11-50 0 25 25 0 0150 0z"/>
                        <circle fill="#073642" cx="90" cy="70" r="5"/>
                        <circle fill="#073642" cx="110" cy="70" r="5"/>
                        <path fill="#fff" stroke="#073642" stroke-width="3" stroke-linecap="round" d="M90 83s 8 15 20 0"/>
                    </svg>
                </div>
            </div>
            <div class="footer-illustrated__bottom">
                <p class="footer-illustrated__copyright">&copy; 2025 Your Friendly Brand</p>
                <nav class="footer-illustrated__social" aria-label="Social media">
                    <ul>
                        <li><a href="#" aria-label="Our Twitter"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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 Facebook"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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>
                    </ul>
                </nav>
            </div>
        </div>
    </footer>
</body>
</html>

View Output