Footer — Closing call to action band

A centred closing headline, lede and two actions sit above identity, three link groups and legal information. Use it to repeat the main conversion after a long page.

ReactHTML

1440 × 900

Open in new tab

Component.tsx193 lines

export default function FooterCtaBand() {
  return (
    <footer className="border-t border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6">
        <div className="mx-auto flex max-w-2xl flex-col items-center gap-8 py-16 text-center sm:py-24">
          <div>
            <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Headline that makes the final invitation clear
            </h2>
            <p className="mt-4 text-lg text-pretty text-neutral-600">
              One sentence that connects the main outcome to this final action.
            </p>
          </div>
          <div className="flex w-full flex-col justify-center gap-3 sm:w-auto sm:flex-row">
            <a
              href="#"
              className="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"
            >
              Primary action
            </a>
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Secondary action
            </a>
          </div>
        </div>
        <div className="grid gap-8 border-t border-neutral-200 py-12 sm:grid-cols-2 lg:grid-cols-4">
          <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-sm text-neutral-600">
              A short statement that explains the purpose of this site.
            </p>
          </div>
          <nav aria-labelledby="footer-cta-band-product">
            <h2 id="footer-cta-band-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-cta-band-resources">
            <h2 id="footer-cta-band-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-cta-band-company">
            <h2 id="footer-cta-band-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>
        </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>
          </nav>
        </div>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use to repeat a main conversion after a long page. Choose footer-newsletter-columns for a subscription close. Variations: use Contact as primary, add reassurance below actions, or replace a group with support links.
Hierarchy: Closing headline and primary action dominate. Lede, identity and three labelled groups follow. Limit headline to 10 words, lede to 24, identity statement to 18 and action labels to 2. Each group has four short links.
Responsive: The closing headline, lede and actions remain centred in one column at every width. Below 640px the actions stack across the full 672px-maximum band width; from 640px they share a centred row and the headline grows to 36px. Directory has one column below 640px, two below 1024px and four above. Legal row stacks below 768px.
Layout: A white footer has a 1152px max-w-6xl container and 24px side padding. The closing band is a centred single column at every width with 64px vertical padding, rising to 96px from 640px, and 32px between copy and actions. Copy max-width is 672px (max-w-2xl); a 30px headline sits 16px above an 18px lede. Two centred 44px actions have 12px gaps. Ruled directory band has 48px vertical padding and four equal columns with 32px gaps at 1024px. Legal row padding is 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. Secondary action has a neutral-300 border and neutral-50 hover fill. Directory is static. Every enabled control has a 2px neutral-900 focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                   Closing outcome headline                   │
│         One sentence that supports the final action          │
│                 [Primary action] [Secondary]                 │
│                                                              │
├──────────────────────────────────────────────────────────────┤
│ Logo              Product       Resources       Company      │
│ Short statement   Link list     Link list       Link list    │
├──────────────────────────────────────────────────────────────┤
│ 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 — Closing call to action band

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns