UI Footers Catalog — 17 Named Patterns

.footer-simple-brand

Simple Brand Row

Brand · short links · copyright on one row. Stacks on small screens.

Marketing page

Quiet footer for a short marketing site.

.footer-centered-stack

Centered Quiet Stack

Centered brand, link row, social icons, then copyright.

Studio site

Editorial footer with balanced center stack.

.footer-link-strip

Compact Link Strip

Low-height strip with middot-separated links and a status meta line.

Docs shell

Utility footer under documentation content.

.footer-four-column

Four Column Sitemap

Equal sitemap columns with a legal bottom bar. 4→2→1 columns.

Product marketing

Full sitemap footer under the landing page.

.footer-brand-columns

Brand Plus Columns

Dark footer: brand blurb + social, then three link columns.

SaaS landing

Dark multi-column footer with brand intro.

.footer-accordion-cols

Accordion Mobile Columns

Desktop columns; ≤768px each group becomes a details accordion.

Commerce site

Dense sitemap that collapses cleanly on phones.

.footer-split-social

Two-pane footer: brand story left, link grid + follow right.

Agency site

Split layout with social cluster.

.footer-newsletter-lead

Email capture leads the footer; sitemap columns sit underneath.

Content brand

Newsletter-first footer for editorial products.

.footer-newsletter-inline

Single soft band: short pitch + inline email form.

Blog post

Compact subscribe bar under long-form content.

.footer-newsletter-dark

Dark hero-style subscribe block above a four-column link grid.

Event brand

High-contrast newsletter footer for launches.

.footer-legal-minimal

Legal Minimal

Copyright left, privacy/terms/cookies right — nothing else.

App settings

Minimal legal footer for product chrome.

.footer-legal-locale

Legal With Locale

Brand + copyright, legal links, and a language/region select.

Global product

Legal bar with locale control for multi-region sites.

.footer-hairline-credits

Hairline Credits

Centered one-line credits with hairline top rule — ultra minimal.

Personal site

Quiet credit line under a portfolio.

.footer-app-download

App Download Bar

Dark strip with pitch + App Store / Google Play badges.

Consumer app

Download CTA as the closing band.

.footer-app-stores

App Stores Mega

App promo + store badges above a four-column sitemap and legal bar.

Mobile-first product

Full footer combining downloads and sitemap.

.footer-sticky-cta

Sticky Mobile CTA

Phone commerce bar: price + wishlist + Buy, safe-area padding, home indicator.

Product detail

Scrollable PDP content sits above a sticky purchase footer.

.footer-thumb-dock

Mobile Thumb Dock

Five-destination bottom dock with glyph + label, active state, and home indicator.

App home

Primary destinations live in the thumb zone instead of a classic site footer.