Footer Examples
People scroll to the footer when they cannot find something elsewhere, so it has to work as a map. It holds the full sitemap, legal links, social profiles, and often a final signup field. Clear columns with short labels make it useful, while one undivided block of links or tiny gray text makes it a chore. Minimal single rows sit alongside multi-column sitemaps and oversized wordmarks in these footer examples.
Common patterns in website footers
How to design a website footer
-
Group links into labeled columns
Sort links by what visitors look for, such as product, resources, company, and legal. Give each column a short heading and keep labels to one or two words. Put the most visited links, like pricing, docs, and contact, near the top of their columns.
-
Keep small links legible
Footers tend to drift into tiny, low-contrast gray text. Keep links at 14 pixels or larger with 4.5:1 contrast against the background, including on dark footers, and leave enough spacing between links that each one is easy to tap on a phone.
-
Collapse columns carefully on mobile
On narrow screens, arrange columns two across or turn them into accordions under each heading. Keep the logo, key links, and legal row visible without expanding anything, and test at small widths, since long link lists push the copyright row far down.
-
Separate the legal row
Place copyright, privacy, terms, and cookie settings in a slim bottom row, set apart by a rule or extra spacing. Keep social icons small and give each an accessible name. A newsletter field needs its own block so it does not crowd the link columns.
