Footer

Structure

The bottom section of a webpage containing secondary navigation, legal links, contact information, and often social media links. It provides closure and additional navigation options.

Visual Examples

Example 1

Example 2

Example 3

Visual examples for Footer coming soon.

How It Works in Apps/Websites

Footers serve as a 'catch-all' for important links that don't fit in the main navigation. They typically contain: company info, product/service links, legal pages (privacy, terms), social media icons, newsletter signup, and copyright notice. Multi-column layouts organize this content. Footers should be visually distinct from main content, often with a darker background.

How AI Interprets This Term

When you say 'footer', AI expects: a full-width section at page bottom, typically darker than the main content, with multiple columns of links, company logo, copyright text at the very bottom, and possibly social media icons. Usually 200-400px tall depending on content.

Prompt Examples

Copy-paste these prompts to use in your AI tools.

Basic

Create a simple footer with company links, social icons, and copyright

Detailed

Design a 4-column footer with: Column 1 (logo + company description), Column 2 (Product links), Column 3 (Resources), Column 4 (Company). Dark gray background #1a1a1a with gray text. Include social icons and copyright at bottom.

Comparative

Show a minimal footer (just copyright and legal links) vs a full 'fat footer' with multiple columns of links

Compare With

Related or contrasting terms to help you understand the differences.

Variants & States

Variants

minimal footerfat footersticky footersitemap footer

States

defaultexpanded (on mobile)

Usage Guidelines

When to Use

  • Every website needs a footer
  • When you have legal/compliance links
  • To provide alternative navigation paths
  • For contact and social information

When NOT to Use

  • Single-screen applications
  • Fullscreen immersive experiences

Related Terms

social links