Footer — Document register

A compact policy table includes document links, formats and update dates above copyright. Use it when published documents are the primary footer destinations.

ReactHTML

1440 × 900

Open in new tab

Component.tsx46 lines

export default function FooterDocumentRegister() {
  return (
    <footer className="border-t border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <a href="#" aria-label="Logo home" className="inline-flex items-center gap-2 font-semibold hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-6"><path d="M4 4h16v16H4zM4 12h16M12 4v16" /></svg>Logo</a>
            <h2 className="mt-6 text-lg font-semibold">Documents and policies</h2>
          </div>
          <p className="max-w-sm text-sm text-neutral-600">Short note about where official information is published</p>
        </div>
        <table className="mt-8 w-full table-fixed border-collapse text-left">
          <caption className="sr-only">Site documents and policy updates</caption>
          <thead>
            <tr className="border-b border-neutral-200 text-xs text-neutral-500">
              <th scope="col" className="w-1/2 pb-3 font-medium">Document</th>
              <th scope="col" className="w-1/4 pb-3 font-medium">Format</th>
              <th scope="col" className="w-1/4 pb-3 font-medium">Updated</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b border-neutral-200">
              <th scope="row" className="py-4 pr-4 text-sm font-medium"><a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 ">Terms</a></th>
              <td className="py-4 text-xs text-neutral-600">HTML</td>
              <td className="py-4 text-xs text-neutral-600">Oct 10</td>
            </tr>
            <tr className="border-b border-neutral-200">
              <th scope="row" className="py-4 pr-4 text-sm font-medium"><a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 ">Privacy policy</a></th>
              <td className="py-4 text-xs text-neutral-600">HTML</td>
              <td className="py-4 text-xs text-neutral-600">Sep 22</td>
            </tr>
            <tr className="border-b border-neutral-200">
              <th scope="row" className="py-4 pr-4 text-sm font-medium"><a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 ">Accessibility statement</a></th>
              <td className="py-4 text-xs text-neutral-600">PDF</td>
              <td className="py-4 text-xs text-neutral-600">Aug 14</td>
            </tr>
          </tbody>
        </table>
        <div className="mt-8 flex flex-wrap items-center gap-4">
          <p className="mr-auto text-xs text-neutral-500">© 2026 Site name</p>
          <a href="#" className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 text-sm">Contact about a document</a>
        </div>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use for information-led sites where policies are key footer content. Choose sitemap columns for a wider range of destinations. Variations include a language column or a downloadable report row.
Hierarchy: Document names are the main 14px links, with quieter format and update metadata. Keep publication note below 12 words, document labels below 3 and dates in a short month/day format.
Responsive: The header stacks below 640px. The table retains its three fixed columns and wraps document names inside the 50% column; the final contact row wraps naturally.
Layout: The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. An identity and heading share a desktop row with a short publication note. A table starts 32px below with 50%/25%/25% fixed columns. Header padding is 12px and body rows use 16px vertical padding with hairline dividers. Copyright and contact follow 32px later.
States: Links underline on hover and show a 2px neutral-900 keyboard outline offset by 2px.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Logo                                                         │
│ Documents and policies                  Publication note     │
│ Document                         Format          Updated     │
│ ──────────────────────────────────────────────────────────   │
│ [Terms]                          HTML            Oct 10      │
│ [Privacy policy]                 HTML            Sep 22      │
│ [Accessibility statement]        PDF             Aug 14      │
│ ──────────────────────────────────────────────────────────   │
│ Copyright                      [Contact about a document]    │
└──────────────────────────────────────────────────────────────┘

View all

Footer — Accordion sitemap
Layout tags: stacked,list,compact
Footer — Address beside a map
Layout tags: asymmetric,media,spacious
Footer — Brand and link columns
Layout tags: asymmetric,grid,compact

Footer — Document register

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns