Footer — Oversized wordmark

A dark divided footer ends with a giant, cropped Logo wordmark, with closing copy, links and contact above it. Use it for a strong visual close with a short directory and a contact route.

ReactHTML

1440 × 900

Open in new tab

Component.tsx122 lines

export default function FooterBigWordmark() {
  return (
    <footer className="overflow-hidden bg-neutral-950 text-white">
      <div className="mx-auto max-w-6xl px-6 pt-16 sm:pt-24">
        <div className="grid border-l border-t border-neutral-800 sm:grid-cols-2 lg:grid-cols-4">
          <div className="border-b border-r border-neutral-800 p-6 sm:col-span-2">
            <a
              href="#"
              aria-label="Logo home"
              className="inline-flex items-center gap-2 font-semibold text-white hover:text-neutral-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            >
              <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>
            <h2 className="mt-6 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Closing line that invites the next step
            </h2>
            <p className="mt-4 max-w-md text-base text-neutral-300">
              One sentence that gives the final invitation a clear purpose.
            </p>
            <a
              href="#"
              className="text-sm font-medium text-neutral-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white mt-6 inline-block"
            >
              Start a conversation
            </a>
          </div>
          <nav aria-labelledby="footer-big-wordmark-links" className="border-b border-r border-neutral-800 p-6">
            <h2 id="footer-big-wordmark-links" className="text-sm font-semibold">
              Explore
            </h2>
            <ul role="list" className="mt-4 grid gap-3">
              <li>
                <a
                  href="#"
                  className="text-sm font-medium text-neutral-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >
                  Product
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-sm font-medium text-neutral-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >
                  About
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-sm font-medium text-neutral-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >
                  Resources
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-sm font-medium text-neutral-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
                >
                  Contact
                </a>
              </li>
            </ul>
          </nav>
          <div className="border-b border-r border-neutral-800 p-6">
            <h2 className="text-sm font-semibold">Contact</h2>
            <address className="mt-4 text-sm not-italic text-neutral-300">
              Street address line
              <br />
              Locality and postal code
              <br />
              Country
            </address>
            <a
              href="mailto:name@example.com"
              className="text-sm font-medium text-neutral-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white mt-6 inline-block break-all"
            >
              name@example.com
            </a>
          </div>
        </div>
        <div className="flex flex-col gap-4 border-t border-neutral-800 py-6 md:flex-row md:items-center md:justify-between">
          <p className="text-sm text-neutral-300">© 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-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            >
              Privacy
            </a>
            <a
              href="#"
              className="text-sm font-medium text-neutral-300 underline underline-offset-4 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
            >
              Terms
            </a>
          </nav>
        </div>
        <p
          aria-hidden="true"
          className="-mb-[0.15em] text-center text-[18vw] leading-none font-semibold tracking-tight"
        >
          Logo
        </p>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use for a strong visual close with a short directory and contact route. Choose footer-link-columns for many destinations. Variations: shorten the closing copy, add a phone link, or change the wordmark crop depth.
Hierarchy: A 30px closing headline leads, then 16px copy and conversation link. Navigation and contact labels are 14px semibold. Limit headline to 8 words, statement to 22, address to 3 lines and email to 28 characters. A small accessible Logo precedes the closing copy; the large repeat is decorative.
Responsive: Cells stack below 640px. At 640px two columns put closing copy across both, then links beside contact. At 1024px all cells share a four-column row. Headline grows to 36px at 640px; wordmark stays 18vw. Legal row stacks below 768px.
Layout: A neutral-950 footer uses white headings, neutral-300 copy and neutral-800 dividers. The 1152px max-w-6xl container has 24px side and 64px top padding, 96px from 640px. A four-column grid at 1024px assigns two columns to closing copy, one to links and one to contact. Cells use 24px padding and border dividers. Legal row has 24px vertical padding. The aria-hidden Logo wordmark is 18vw, leading-none, tracking-tight, centred with -0.15em bottom margin and overflow hidden to crop its lower edge.
States: Links hover from neutral-300 to white and show a 2px white keyboard-focus outline offset 2px. Only the decorative wordmark is cropped. Interactive content stays inside the footer; there are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Closing headline                     Links      Contact      │
│ One-sentence closing statement       Product    Address      │
│ [Start a conversation]               About      Email        │
├──────────────────────────────────────────────────────────────┤
│ Copyright                                   Privacy Terms    │
│                                                              │
│                          L  O  G  O                          │
│                      Cropped lower edge                      │
└──────────────────────────────────────────────────────────────┘

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 — Oversized wordmark

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns