Skip to content
FoundryFoundry — home
Search

Multi-column footer

Brand statement plus three labelled navigation groups, each its own landmark.

FootersstarterFeaturedfootercolumnssitemapdefault

Live preview

full widthLive preview — open it in a new tab for the full-height version.
Open the preview in a new tab

Source

components/blocks/footers/multi-column.tsx

This exact file renders the preview above.

import Link from 'next/link'
import { BrandMark } from '@/components/library/brand'
import { Container } from '@/components/ui/layout'
import { productLinks, resourceLinks, companyLinks } from '@/content/nav-demo'

/**
 * Multi-column footer
 *
 * The default site footer: brand statement plus three labelled navigation
 * groups. Each group is its own `<nav>` with an accessible name, so a screen
 * reader user can jump straight to "Resources" rather than tabbing through
 * twenty undifferentiated links.
 */
const groups = [
  { label: 'Product', links: productLinks },
  { label: 'Resources', links: resourceLinks },
  { label: 'Company', links: companyLinks },
]

export default function MultiColumnFooter() {
  return (
    <footer className="border-t border-line bg-surface-sunken">
      <Container className="py-12">
        <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-4">
          <div className="max-w-xs">
            <div className="flex items-center gap-2 text-ink-strong">
              <BrandMark className="size-5 text-accent" />
              <span className="display-type text-md font-semibold">Foundry</span>
            </div>
            <p className="mt-3 text-sm text-ink-muted">
              The complete frontend building-block library. Build faster. Ship better.
            </p>
          </div>

          {groups.map((group) => (
            <nav key={group.label} aria-label={group.label}>
              <h2 className="label-caps mb-3 text-ink-subtle">{group.label}</h2>
              <ul className="flex flex-col gap-2">
                {group.links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-sm text-ink-muted transition-colors hover:text-accent"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </nav>
          ))}
        </div>

        <div className="mt-10 flex flex-col gap-2 border-t border-line pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs text-ink-subtle">Foundry 1.0 — fictional product, real code.</p>
          <p className="label-caps text-ink-subtle">Build faster. Ship better.</p>
        </div>
      </Container>
    </footer>
  )
}

Demo source — adapt to your project. Foundry is not published as a package.

Usage

The default site footer. Each group is its own `<nav>` with an accessible name, so a screen-reader user can jump straight to "Resources" rather than tabbing through twenty undifferentiated links.

  • Group headings are `h2`; the footer sits at the top level of the document outline.
  • Keep groups to five or six links — beyond that use the mega footer or fewer groups.

Variants and states

Every entry below is a genuine difference in behaviour or layout, and every one of them is visible in the preview above.

  • Four-column at lg
  • Two-column at md
  • Stacked on mobile

Accessibility

Named groups
Every column is a labelled navigation landmark.
Heading structure
Column headings are real headings, not styled paragraphs.

Foundry implements published ARIA patterns and is tested against them. No WCAG certification is claimed — see the accessibility documentation for what is and is not covered.

Related

All navigation