Footer — Large numbered links

Identity and an audience figure sit beside three numbered destinations with descriptions. Use it for a short directory with prominent links.

ReactHTML

1440 × 900

Open in new tab

Component.tsx146 lines

export default function FooterLargeLinks() {
  return (
    <footer className="border-t border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 pt-16 sm:pt-24">
        <div className="grid gap-12 lg:grid-cols-[1fr_2fr] lg:gap-16">
          <div>
            <a
              href="#"
              aria-label="Logo home"
              className="inline-flex items-center gap-2 font-semibold text-neutral-900 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"
              >
                <rect x="4" y="4" width="16" height="16" rx="3" />
                <path d="M4 12h16M12 4v16" />
              </svg>
              Logo
            </a>
            <p className="mt-4 max-w-xs text-base text-neutral-600">
              One sentence that describes the purpose of this site and its community.
            </p>
            <p className="mt-8 text-5xl font-semibold tracking-tight">1,284</p>
            <p className="mt-2 text-sm text-neutral-500">members</p>
          </div>
          <ol role="list">
            <li className="border-t border-neutral-200">
              <a
                href="#"
                className="group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-6 gap-y-3 py-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:grid-cols-[7rem_minmax(0,1fr)_auto]"
              >
                <span aria-hidden="true" className="col-span-2 font-mono text-sm text-neutral-500 sm:col-span-1">
                  01
                </span>
                <span className="min-w-0">
                  <span className="block text-2xl font-semibold tracking-tight group-hover:text-neutral-600">
                    Explore the main offering
                  </span>
                  <span className="mt-2 block text-base text-neutral-600">
                    A short description of the products and options available here.
                  </span>
                </span>
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-6 self-center transition-transform group-hover:translate-x-1"
                >
                  <path d="M4 12h16m-6-6 6 6-6 6" />
                </svg>
              </a>
            </li>
            <li className="border-t border-neutral-200">
              <a
                href="#"
                className="group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-6 gap-y-3 py-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:grid-cols-[7rem_minmax(0,1fr)_auto]"
              >
                <span aria-hidden="true" className="col-span-2 font-mono text-sm text-neutral-500 sm:col-span-1">
                  02
                </span>
                <span className="min-w-0">
                  <span className="block text-2xl font-semibold tracking-tight group-hover:text-neutral-600">
                    Browse the resource library
                  </span>
                  <span className="mt-2 block text-base text-neutral-600">
                    A sentence that explains the guides and references readers will find.
                  </span>
                </span>
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-6 self-center transition-transform group-hover:translate-x-1"
                >
                  <path d="M4 12h16m-6-6 6 6-6 6" />
                </svg>
              </a>
            </li>
            <li className="border-t border-neutral-200">
              <a
                href="#"
                className="group grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-6 gap-y-3 py-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:grid-cols-[7rem_minmax(0,1fr)_auto]"
              >
                <span aria-hidden="true" className="col-span-2 font-mono text-sm text-neutral-500 sm:col-span-1">
                  03
                </span>
                <span className="min-w-0">
                  <span className="block text-2xl font-semibold tracking-tight group-hover:text-neutral-600">
                    Start a conversation
                  </span>
                  <span className="mt-2 block text-base text-neutral-600">
                    A clear invitation for people who need help with their next step.
                  </span>
                </span>
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-6 self-center transition-transform group-hover:translate-x-1"
                >
                  <path d="M4 12h16m-6-6 6 6-6 6" />
                </svg>
              </a>
            </li>
          </ol>
        </div>
        <div className="flex flex-col gap-4 border-t border-neutral-200 py-6 md:flex-row md:items-center md:justify-between mt-12">
          <p className="text-sm text-neutral-500">© 2026 Site name</p>
          <nav aria-label="Legal navigation" className="flex flex-wrap gap-x-6 gap-y-3">
            <a
              href="#"
              className="text-sm 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
            </a>
            <a
              href="#"
              className="text-sm 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>
          </nav>
        </div>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use when three final destinations and a community figure deserve emphasis. Choose footer-link-columns for a deeper directory. Variations: show years instead of member count, change destinations, or replace the figure label.
Hierarchy: Three 24px titles are the main navigation with 16px supporting descriptions. The 1,284 figure and members label anchor identity. Limit statement to 22 words, titles to 4 and descriptions to 18. The ol has role=list; visible numbers are aria-hidden to avoid duplicate positions.
Responsive: Identity stacks above the list below 1024px with 48px gaps. Below 640px each index sits above its title and arrow occupies the right column. At 640px the 112px index column appears. Legal row stacks below 768px and is justified above.
Layout: A white footer has a top hairline and a 1152px max-w-6xl container with 24px side and 64px top padding, 96px from 640px. At 1024px a 1:2 grid (grid-cols-[1fr_2fr]) has 64px gaps. Identity contains Logo, a 16px statement and 48px figure 32px below. Three ordered list links have top hairlines and 24px vertical padding. At 640px each link has a 112px index column, flexible text and a 24px arrow; below that the 14px mono index sits above the 24px title. Legal row follows a 48px margin and hairline.
States: Each entire list entry is a link. Titles hover to neutral-600 and arrows translate 4px on group-hover with a 150ms transform transition. Legal links hover to neutral-600. Every enabled control has a 2px neutral-900 focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Logo                   01   Destination title           ->   │
│ Short statement             One-sentence description         │
│                        ───────────────────────────────────   │
│ 1,284                  02   Resource destination        ->   │
│ members                     One-sentence description         │
│                        ───────────────────────────────────   │
│                        03   Contact destination         ->   │
│                             One-sentence description         │
├──────────────────────────────────────────────────────────────┤
│ Copyright                                   Privacy Terms    │
└──────────────────────────────────────────────────────────────┘

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 — Large numbered links

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns