Footer

Swiss Grid-inspired footer pattern with multi-column layout, social links with icons, and organized content sections. Designed following Swiss design principles with precise spacing and clean typography.

Key Features:
  • Swiss Grid design with 8px base unit spacing system
  • Responsive multi-column layout (1 col mobile, 2 cols tablet, 12-col grid desktop)
  • Organized content sections with clear typographic hierarchy
  • Social links with integrated GitHub icon
  • Generous whitespace for breathing room
  • Grid-based layout with precise alignment
  • Minimal, functional aesthetic
  • Theme-aware colors using CSS custom properties
  • Separated top content area and bottom copyright bar

Swiss Grid Principles: The Footer uses an 8px base spacing unit (py-16 sm:py-20 lg:py-24 = 128/160/192px) and a 12-column grid system on large screens for precise, structured layouts.

Code Example

<Footer
  logo="My Brand"
  sections={[
    {
      title: 'Work',
      links: [
        { label: 'Portfolio', href: '/portfolio' },
        { label: 'Case Studies', href: '/case-studies' },
        { label: 'Resume', href: '/resume.pdf', external: true },
      ],
    },
    {
      title: 'Play',
      links: [
        { label: 'Creative Sandbox', href: '/sandbox', external: true },
        { label: 'Blog', href: '/blog' },
        { label: 'Poetry', href: '/poetry' },
      ],
    },
    {
      title: 'Tools',
      links: [
        { label: 'Design Studio', href: '/studio' },
        { label: 'Component Library', href: '/components' },
      ],
    },
  ]}
  socialLinks={{
    github: 'https://github.com/example',
    linkedin: 'https://linkedin.com/in/example',
    email: 'hello@example.com',
  }}
  copyright="© 2025 Example Brand"
/>

Swiss Grid Layout

The Footer employs a precise 12-column grid system on desktop, with responsive behavior across breakpoints.

Grid Configuration:
  • Brand Section: lg:col-span-4 - Takes 4 of 12 columns (33%)
  • Navigation Sections: lg:col-span-2 - Each takes 2 of 12 columns (16.6%)
  • Social Links: lg:col-span-2 - Takes remaining 2 columns (16.6%)
Spacing (8px base units):
  • py-16 sm:py-20 lg:py-24 - Vertical padding: 128/160/192px (16/20/24 units)
  • gap-12 lg:gap-8 - Column gaps: 96px mobile, 64px desktop (12/8 units)
  • mb-6 - Logo margin: 48px (6 units)
  • mb-4 - Section title margin: 32px (4 units)
  • space-y-3 - Link spacing: 24px (3 units)

Design Philosophy: Every spacing value is a multiple of 8px, creating a consistent vertical and horizontal rhythm. The grid ensures precise alignment and professional appearance across all screen sizes.

Social Links with Icons

The Footer includes integrated icon support for social links, with the GitHub icon automatically displayed alongside the GitHub link.

Supported Social Links:
  • GitHub: Displays with GitHubIcon component (size 16)
  • LinkedIn: Text-only link
  • Email: Mailto link

Icon Integration: The GitHubIcon uses currentColor to automatically adapt to light/dark modes and inherits the link's hover color.