Skip to content
FoundryFoundry — home
Search

Minimal footer

One row: mark, statement, three links.

Footersstarterfooterminimalsingle-row

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/minimal.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'

/**
 * Minimal footer
 *
 * One row: mark, copyright, three links. For products where the footer is a
 * formality rather than a navigation surface, anything more is noise.
 */
const links = [
  { label: 'Docs', href: '/docs/getting-started' },
  { label: 'Changelog', href: '/changelog' },
  { label: 'About', href: '/about' },
]

export default function MinimalFooter() {
  return (
    <footer className="border-t border-line bg-canvas">
      <Container className="flex flex-col items-center gap-4 py-8 sm:flex-row sm:justify-between">
        <div className="flex items-center gap-2 text-ink-muted">
          <BrandMark className="size-4 text-accent" />
          <span className="text-sm">Foundry — a template demonstration</span>
        </div>
        <nav aria-label="Footer">
          <ul className="flex items-center gap-5">
            {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>
      </Container>
    </footer>
  )
}

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

Usage

For products where the footer is a formality rather than a navigation surface. Anything more is noise.

  • Three links maximum.
  • Stacks and centres below `sm` rather than wrapping awkwardly.

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.

  • Single row
  • Stacked below sm

Accessibility

Landmark
A `contentinfo` landmark with one labelled `<nav>` inside.
Single row semantics
The statement is a paragraph and the links are a labelled navigation region, so the row is not one undifferentiated strip.

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