Skip to content
FoundryFoundry — home
Search

Documentation footer

Previous/next cards with rel hints, plus edit and report links.

Footersstarterfooterdocspaginationfeedback

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/documentation.tsx

This exact file renders the preview above.

import Link from 'next/link'
import { ArrowLeft, ArrowRight, MessageSquare, PencilLine } from 'lucide-react'
import { Container } from '@/components/ui/layout'
import { Divider } from '@/components/ui/layout'

/**
 * Documentation footer
 *
 * Two jobs: move the reader to the next page, and give them somewhere to go
 * when the page was wrong. Previous/next uses `rel` hints and a symmetrical
 * two-card layout that collapses to a single column on mobile.
 */
export default function DocumentationFooter() {
  return (
    <footer className="bg-canvas">
      <Container>
        <Divider />
        <div className="grid gap-3 py-8 sm:grid-cols-2">
          <Link
            href="/docs/design-tokens"
            rel="prev"
            className="group flex flex-col rounded-lg border border-line bg-surface p-4 transition-colors hover:border-line-strong"
          >
            <span className="flex items-center gap-1.5 text-xs text-ink-subtle">
              <ArrowLeft className="size-3.5" aria-hidden="true" />
              Previous
            </span>
            <span className="mt-1.5 text-sm font-semibold text-ink-strong group-hover:text-accent">
              Design tokens
            </span>
          </Link>

          <Link
            href="/docs/contributing"
            rel="next"
            className="group flex flex-col items-end rounded-lg border border-line bg-surface p-4 text-right transition-colors hover:border-line-strong"
          >
            <span className="flex items-center gap-1.5 text-xs text-ink-subtle">
              Next
              <ArrowRight className="size-3.5" aria-hidden="true" />
            </span>
            <span className="mt-1.5 text-sm font-semibold text-ink-strong group-hover:text-accent">
              Contributing
            </span>
          </Link>
        </div>

        <div className="flex flex-col gap-3 border-t border-line py-6 sm:flex-row sm:items-center sm:justify-between">
          <nav aria-label="Page actions">
            <ul className="flex flex-wrap gap-x-5 gap-y-2">
              <li>
                <Link
                  href="/docs/contributing"
                  className="inline-flex items-center gap-1.5 text-sm text-ink-muted hover:text-accent"
                >
                  <PencilLine className="size-3.5" aria-hidden="true" />
                  Suggest an edit
                </Link>
              </li>
              <li>
                <Link
                  href="/forms/support-request"
                  className="inline-flex items-center gap-1.5 text-sm text-ink-muted hover:text-accent"
                >
                  <MessageSquare className="size-3.5" aria-hidden="true" />
                  Report a problem
                </Link>
              </li>
            </ul>
          </nav>
          <p className="text-xs text-ink-subtle">Last updated in v1.0.0</p>
        </div>
      </Container>
    </footer>
  )
}

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

Usage

Two jobs: move the reader to the next page, and give them somewhere to go when the page was wrong. Both are load-bearing for documentation quality.

  • `rel="prev"` and `rel="next"` are set, so user agents that use them behave correctly.
  • The next card is right-aligned, which is what makes the pair readable as a sequence rather than two cards.

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.

  • Previous/next pair
  • Page actions row
  • Last-updated line

Accessibility

Direction in text
Each card says "Previous" or "Next" in words, not only with an arrow.
Whole-card links
Each card is a single focus stop.

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