Footer — Newsletter above links

A labelled signup form sits above four navigation groups and a legal bar. Use it when subscription is the final page action.

ReactHTML

1440 × 900

Open in new tab

Component.tsx223 lines

export default function FooterNewsletterColumns() {
  return (
    <footer className="border-t border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6">
        <div className="grid gap-12 py-16 sm:py-24 lg:grid-cols-2 lg:items-end">
          <div>
            <h2 className="text-2xl font-semibold tracking-tight text-balance">Headline for the newsletter signup</h2>
            <p className="mt-3 max-w-lg text-base text-neutral-600">
              One sentence that explains what readers receive and why it is useful.
            </p>
          </div>
          <form action="#" method="get">
            <label htmlFor="footer-newsletter-columns-email" className="block text-sm font-medium">
              Email
            </label>
            <div className="mt-2 flex flex-col gap-3 sm:flex-row sm:items-center">
              <input
                id="footer-newsletter-columns-email"
                name="email"
                type="email"
                autoComplete="email"
                required
                placeholder="name@example.com"
                aria-describedby="footer-newsletter-columns-hint"
                className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              />
              <button
                type="submit"
                className="shrink-0 inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Subscribe
              </button>
            </div>
            <p id="footer-newsletter-columns-hint" className="mt-3 text-sm text-neutral-500">
              State the email frequency and how to unsubscribe.
            </p>
          </form>
        </div>
        <div className="grid grid-cols-2 gap-x-6 gap-y-10 border-t border-neutral-200 py-12 md:grid-cols-4">
          <nav aria-labelledby="footer-newsletter-columns-product">
            <h2 id="footer-newsletter-columns-product" className="text-sm font-semibold">
              Product
            </h2>
            <ul role="list" className="mt-4 grid gap-3">
              <li>
                <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"
                >
                  Overview
                </a>
              </li>
              <li>
                <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"
                >
                  Features
                </a>
              </li>
              <li>
                <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"
                >
                  Pricing
                </a>
              </li>
              <li>
                <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"
                >
                  Integrations
                </a>
              </li>
            </ul>
          </nav>
          <nav aria-labelledby="footer-newsletter-columns-resources">
            <h2 id="footer-newsletter-columns-resources" className="text-sm font-semibold">
              Resources
            </h2>
            <ul role="list" className="mt-4 grid gap-3">
              <li>
                <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"
                >
                  Guides
                </a>
              </li>
              <li>
                <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"
                >
                  Documentation
                </a>
              </li>
              <li>
                <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"
                >
                  Updates
                </a>
              </li>
              <li>
                <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"
                >
                  Community
                </a>
              </li>
            </ul>
          </nav>
          <nav aria-labelledby="footer-newsletter-columns-company">
            <h2 id="footer-newsletter-columns-company" className="text-sm font-semibold">
              Company
            </h2>
            <ul role="list" className="mt-4 grid gap-3">
              <li>
                <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"
                >
                  About
                </a>
              </li>
              <li>
                <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"
                >
                  Careers
                </a>
              </li>
              <li>
                <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"
                >
                  Press
                </a>
              </li>
              <li>
                <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"
                >
                  Partners
                </a>
              </li>
            </ul>
          </nav>
          <nav aria-labelledby="footer-newsletter-columns-support">
            <h2 id="footer-newsletter-columns-support" className="text-sm font-semibold">
              Support
            </h2>
            <ul role="list" className="mt-4 grid gap-3">
              <li>
                <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"
                >
                  Help center
                </a>
              </li>
              <li>
                <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"
                >
                  Contact support
                </a>
              </li>
              <li>
                <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"
                >
                  Status
                </a>
              </li>
              <li>
                <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"
                >
                  Accessibility
                </a>
              </li>
            </ul>
          </nav>
        </div>
        <div className="flex flex-col gap-4 border-t border-neutral-200 py-6 md:flex-row md:items-center md:justify-between">
          <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>
            <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"
            >
              Cookies
            </a>
          </nav>
        </div>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use when a newsletter is the final useful page action. Choose footer-link-columns when signup belongs elsewhere. Variations: change frequency copy, shorten the directory, or add a preferences link beside the hint.
Hierarchy: Signup headline and Email field dominate the four link groups. Limit headline to 6 words, copy to 22 and hint to 16. Email is required with type=email, autocomplete=email and aria-describedby pointing to the hint. Each group has four links.
Responsive: Below 1024px newsletter copy and form stack. Below 640px input and button stack full width; from 640px they share a row. Link groups use two columns below 768px and four above. Legal row stacks below 768px and is justified above.
Layout: A white ruled footer uses a 1152px max-w-6xl container and 24px side padding. Newsletter band has 64px vertical padding, 96px from 640px and 48px gaps; at 1024px two equal columns align bottom. A 24px heading sits 12px above 16px copy. A visible 14px label precedes the 40px email input and 44px submit with 12px gaps; 14px hint sits 12px below. Ruled links band has 48px vertical padding; legal row has 24px.
States: Text links hover from neutral-900 to neutral-600. Primary actions are 44px tall with a 6px radius, neutral-900 fill, neutral-700 hover fill and 150ms colour transition. The native GET form validates required email before submitting. Only browser validation is shown. Every enabled control has a 2px neutral-900 focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Newsletter headline         Email                            │
│ Short signup description    [name@example.com] [Subscribe]   │
│                             Consent and frequency hint       │
├──────────────────────────────────────────────────────────────┤
│ Product        Resources       Company       Support         │
│ Link list      Link list       Link list     Link list       │
├──────────────────────────────────────────────────────────────┤
│ Copyright                            Privacy Terms Cookies   │
└──────────────────────────────────────────────────────────────┘

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 — Newsletter above links

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns