Mega footer — Design Atlas

<div class="foot"> <div class="cols"> <div class="col"><b class="logo"></b><span class="ln"></span><span class="ln s"></span></div> <div class="col"><b class="h"></b><a></a><a></a><a></a><a></a></div> <div class="col"><b class="h"></b><a></a><a></a><a></a></div> <div class="col"><b class="h"></b><a></a><a></a><a></a><a></a></div> </div> <div class="bottom"><span>© 2026 Example Inc.</span><div class="social"><i></i><i></i><i></i></div></div> </div>

.foot{width:min(94%,860px);display:flex;flex-direction:column;gap:clamp(8px,2vmin,14px)} .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(8px,2vmin,16px)} .col{display:flex;flex-direction:column;gap:clamp(5px,1.2vmin,9px)} .logo{width:34%;height:clamp(8px,1.8vmin,13px);border-radius:3px;background:var(--accent)} .col .ln{display:block;height:clamp(4px,.9vmin,6px);border-radius:2px;background:var(--line);width:80%} .col .ln.s{width:55%} .col .h{height:clamp(5px,1.1vmin,8px);width:50%;border-radius:2px;background:var(--fg);opacity:.6;margin-bottom:2%} .col a{display:block;height:clamp(4px,.9vmin,6px);border-radius:2px;background:var(--line);width:70%} .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:clamp(6px,1.6vmin,12px); border-top:1px solid var(--line);font-size:clamp(6.5px,1.2vmin,9px);color:var(--muted)} .social{display:flex;gap:6px} .social i{width:clamp(9px,1.9vmin,14px);height:clamp(9px,1.9vmin,14px);border-radius:50%;background:var(--line)}

More than a one-line copyright — a large footer that doubles as a sitemap. Columns are usually grouped by category ("Product," "Company," "Resources," "Legal"), each with five to eight links stacked vertically. A logo and one-line tagline sit up top, often alongside a newsletter field.

Footer links rarely get clicked, but they do two things: they thicken the site's internal link graph for SEO, and they signal that a real company is behind the product (careers, about, terms of service). The very bottom row usually holds the copyright year, social icons, and a language/region switcher.

Uneven link counts per column make the bottom edge look ragged — merge a category with fewer than three links into a neighbor instead of giving it its own column. And a link pointing to a placeholder `#` gets caught the instant a visitor clicks it.

When to use

Use once the site has more than about ten pages, or needs to surface company info like careers and legal terms. A single-page product is fine with a short, single-line footer.