Website footer design examples, by site type

A website footer does three jobs: it gives a visitor who reached the bottom one more place to go, it says who runs the site and how to reach them, and it carries the legal links. The values behind a good one are modest: 80px of padding at the top and 48px at the bottom on desktop, four to six link groups, links at 14px to 15px with 10px between rows, and rows at least 44px tall on a phone.

Footers fall into two families. Directory footers help someone find a page, and they are what most sites need. Scene footers end the page on a picture and one action, so the last thing a visitor sees is an image rather than a list. A good site often uses a small directory under a strong closing scene.

Below are what every footer carries, footer structures by site type with real footers measured, the scene footers in the Thanor library, and the CSS for a reveal footer and a giant wordmark that fills its row.

What every footer carries, in values#

Five zones, in this order from top to bottom. Leave out the ones your site does not need rather than filling them.

Spacing between those zones does most of the visual work. Groups sit 32px to 48px apart on a twelve column grid. The footer itself takes 80px at the top and 48px at the bottom, the only asymmetric padding on a page, as the landing page rhythm sets out.

The markup matters as much as the look. According to MDN, a <footer> at body level maps to the contentinfo landmark, which lets screen reader users jump straight to it, while a <footer> inside an <article>, <main> or <section> maps to a generic element. Keep one site footer at body level, and wrap the link groups in <nav aria-label="Footer"> so they are announced as navigation.

Footers that end on a scene#

A scene footer treats the last screen as a picture with type on it, instead of a gray band of links. Two designs in the library are built exactly for this position on the page.

Woolgather is a studio footer. A knitted creature fills the lower two thirds of the screen and its pupils follow your cursor, while three columns of very dark type sit straight on the picture with no scrim behind them. The picture is pale where the type goes, so the text measures 16:1 without any overlay. On a phone the picture moves below the content and plays as a plain loop, so nothing depends on a cursor.

Embercall is a closing section: one film of a brass automaton standing in a field of glowing glass reeds at night, four lines of large condensed type over it, and one small glass panel holding three icon buttons, placed over the darkest part of the picture as glass that still reads recommends. Nothing on the screen animates except the film. The quiet corner where the type sits stays empty night for the whole loop, which is why the type needs no panel behind it.

Both rely on the same decision. The picture is made for the type, with an empty, calm area where the words go, and the contrast is checked on the worst frame of the loop. A scene footer can still end with a small legal row underneath, and usually should. For a picture that loops behind a closing section, animated backgrounds has clips you can drop in by URL.

Footer structures by site type#

What a footer carries depends on what the visitor came to do. These are the structures that hold up, with three real footers as they stood at the time of writing.

Linear's footer is the SaaS pattern done plainly: six groups (Product, Features, Company, Resources, Connect and Legal) and 45 links on near-black #08090A. Everything a buyer checks before signing up, such as security, status and the changelog, is one click away.

Allbirds shows the store pattern. The email sign-up comes first, then a Help group with the support email, contact and returns, then Shop and Company. The legal row carries the refund, privacy, terms and shipping policies, cookie preferences and a Do Not Sell My Personal Information link, which is the list a shopper looks for when something goes wrong with an order. On a clothing store that is often the fit, which is why a fashion brief puts the model's size in every caption.

Apple's footer is the directory at its largest: eleven headed groups in five columns, set at 12px on #F5F5F7, with a legal row for privacy, terms, sales and refunds and a site map. At that size the footer is a second navigation, and treating it as one is correct.

Local business and portfolio footers#

A local business footer is mostly contact details, and every one of them should be something a phone can act on:

• The phone number as a tel: link, written the same way it appears everywhere else online.
• The address in an <address> element, with a "Get directions" link that opens the visitor's own maps app. It loads nothing and works better than a small embedded map.
• Opening hours as text, never as an image, with today's hours first if you can generate them, as the restaurant prompt does in its first screen.
• One booking or ordering button, the same one as in the header.

A portfolio footer is the opposite: almost no links, and one action set large. Make the email address the biggest type in the footer, around clamp(32px, 6vw, 96px), add one line on availability, and list three or four profiles as words rather than icons. Woolgather's layout, a block of type at the left, the wordmark in the middle and a contact block at the right, is a good skeleton for a studio. The portfolio website values cover the pages above it.

Two more ways to end a page#

Two designs in the library end on distinctive footers without building a whole scene, and both are easy to adapt.

Lacca, a nail lacquer studio, fixes a deep cherry footer under the page and uncovers it as the content lifts off, with a giant porcelain wordmark rising into its row. It also shows a contrast decision worth copying: small text on red sits on a darker red, #D4002A, where porcelain type measures 5.10:1, because the brand red only reaches 4.51:1.

Palenque, a single-village mezcal, ends on a deep teal footer under the brand name set as one giant word, tone on tone, at about 1.27:1. The word is decoration, hidden from screen readers while the name appears as real text elsewhere, which is the only case where type that faint is acceptable.

The reveal footer and the giant wordmark, in CSS#

The reveal footer needs two rules. The main content gets an opaque background and sits above the footer, and the footer sticks to the bottom of the viewport underneath it. As the end of the content scrolls up, it uncovers a footer that was there the whole time.

main {
  position: relative;
  z-index: 1;
  background: #fff4f7; /* must be opaque */
}
.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  padding: 80px 32px 48px;
  background: #d4002a;
  color: #fff4f7;
}
.footer-word-row { container-type: inline-size; }
.footer-word {
  font-size: calc(100cqi / 4.12);
  line-height: 0.8;
  white-space: nowrap;
}

Only use the reveal when the footer is shorter than the window. A footer taller than the viewport cannot be uncovered all at once, and part of it is stuck out of reach. Check footer.offsetHeight against about 85% of innerHeight and add the sticky rule with a class only when it fits.

The giant wordmark is a ratio. Set the word at 100px in your face and measure its width; if it is 412px, the word is 4.12 times its font size, so 100cqi / 4.12 fills the row exactly. Size it in container units rather than 100vw, because in browsers with classic scrollbars 100vw includes the scrollbar and the word overflows by its width. Keep the word aria-hidden="true" if the brand name already appears as text.

The footer on a phone#

On a phone, the footer is often where a visitor goes looking for a phone number or the returns policy, so it has to work with a thumb. Four rules:

1. Order by intent. The one action first, then contact, then link groups, then the legal row.
2. Two columns of link groups, with each link padded to a 44px row. WCAG 2.5.8 sets 24px as the minimum target and exempts links inside a sentence; 44px is the comfortable size for a list of links.
3. Collapse groups only when there are many. Under about thirty links, show everything. Past that, use disclosure buttons with aria-expanded for each group heading.
4. Respect the safe area with padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px)), which needs viewport-fit=cover in the viewport meta tag.

Scene footers need their own phone layout rather than a squeezed desktop one. Woolgather moves its picture below the content at full width and plays it as a loop, since a cursor no longer exists, and that pattern works for any interactive footer. The interactive website examples cover the touch fallbacks in detail.

How to prompt a footer with AI#

A model asked for "a modern footer" tends to return four columns of gray links and a row of social icons. Specify the zones, the sizes and the phone layout:

Site footer for a SaaS product, background #0B0D12, text #E8EAF0.
Padding 80px top, 48px bottom, container 1200px, 12 columns.
Row 1: wordmark 28px tall, one line of positioning, one button
"Get started". Row 2: five link groups (Product, Customers,
Resources, Company, Legal); headings 13px, weight 600, #9AA0AE
(7.42:1); links 15px on 22px leading, 10px apart; 40px between
groups. Row 3, after a 1px rgba(255, 255, 255, 0.08) rule:
copyright with the current year generated, Privacy, Terms,
Cookie settings, Status, all 13px.
Under 640px: the button first and full width, then two columns
of groups, each link a 44px row.
One <footer> at body level; groups inside <nav aria-label="Footer">.

For a scene footer, describe the picture and where it stays empty, and give the worst-case contrast you need. If you work in Claude or Cursor, the Thanor MCP can hand the model Woolgather's or Embercall's full art direction instead of a description.

Footer mistakes to avoid#

• A newsletter box competing with the main action. It turns the visitors closest to buying into people on a list, one of the sections to delete.
• A gray picked for white, reused on dark. #6B7280 passes on white at 4.83:1 and fails on #0A0A0A at 4.10:1.
• Icon-only social links with no accessible name.
• A copyright year typed by hand, which goes stale every January.
• Legal text at 11px in a pale gray, the line people open when they are deciding whether to trust you.
• The header navigation repeated and nothing else, which wastes the one place built for secondary pages such as security, careers and support.
• Links in four sizes and three grays. One link size and one muted value, the same discipline as a professional type system, makes even a long directory calm.
• A reveal footer taller than the window, or a dark footer that never checks dark mode contrast.

Where to go from here#

Open Woolgather and move your cursor across it. In a few seconds you will know whether a footer that is a picture suits your brand, and it shows the two decisions a scene footer depends on: type set straight on a picture made for it, and a phone layout that drops the cursor gracefully.

Then browse the Thanor library for the page that sits above it. The SaaS website examples show how the sections before a footer are built, and every design comes with a prompt that carries its values for your model.