A near-black footer that starts with a pitch instead of links. The top band has a small availability line, a very large headline and a lime pill button with an arrow, plus an email address for people who would sooner write. Under a divider come the logo, a two-sentence description, a postal address and three link columns, then a legal bar. On phones the headline scales down, the button goes full width and the columns form a two-column grid.
const columns = [
{ title: "Studio", links: ["Selected work", "Services", "Process", "Journal"] },
{ title: "Services", links: ["Brand identity", "Websites", "Packaging", "Art direction"] },
{ title: "Elsewhere", links: ["Instagram", "Behance", "LinkedIn", "Newsletter"] },
];
export default function DarkFooterWithLargeCallToAction() {
const focus = "focus:outline-none focus-visible:ring-2 focus-visible:ring-lime-300 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-950";
return (
<footer className="bg-neutral-950 px-6 text-neutral-300">
<div className="mx-auto max-w-6xl">
<div className="flex flex-col gap-10 border-b border-white/10 py-16 sm:py-24 lg:flex-row lg:items-end lg:justify-between">
<div>
<p className="flex items-center gap-2.5 text-sm font-medium text-lime-300">
<span aria-hidden="true" className="h-2 w-2 rounded-full bg-lime-300" />
Booking projects for spring
</p>
<h2 className="mt-6 max-w-3xl text-4xl font-semibold leading-[1.05] tracking-tight text-white sm:text-6xl lg:text-7xl">
Got a brand that needs a sharper edge?
</h2>
</div>
<div className="flex flex-none flex-col gap-4 sm:flex-row sm:items-center lg:flex-col lg:items-end">
<a href="#" className={`group inline-flex h-14 items-center justify-center gap-3 rounded-full bg-lime-300 pl-7 pr-2 text-base font-semibold text-neutral-950 transition hover:bg-lime-200 ${focus}`}>
Start a project
<span className="flex h-10 w-10 items-center justify-center rounded-full bg-neutral-950 text-lime-300 transition-transform group-hover:translate-x-0.5">
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" className="h-4 w-4">
<path d="M4 10h12m-4.5-4.5L16 10l-4.5 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</span>
</a>
<a href="#" className={`inline-flex min-h-[40px] items-center rounded text-sm text-neutral-300 underline decoration-white/30 underline-offset-4 hover:text-white hover:decoration-white ${focus}`}>
[email protected]
</a>
</div>
</div>
<div className="grid gap-12 py-14 lg:grid-cols-12">
<div className="lg:col-span-5">
<a href="#" className={`flex w-fit items-center gap-3 rounded ${focus}`}>
<svg viewBox="0 0 28 28" aria-hidden="true" className="h-7 w-7">
<rect width="28" height="28" className="fill-lime-300" />
<path d="M9 21V7h10M9 14h7" fill="none" className="stroke-neutral-950" strokeWidth="2.6" strokeLinecap="square" />
</svg>
<span className="text-lg font-semibold tracking-tight text-white">Fieldnote Studio</span>
</a>
<p className="mt-5 max-w-xs text-sm leading-relaxed text-neutral-400">
An independent design studio of nine people. We make identities and websites for food, drink and hospitality brands.
</p>
<address className="mt-5 text-sm not-italic leading-relaxed text-neutral-400">
14 Tannery Row, Unit 3<br />
Leeds LS9 8AG
</address>
</div>
<nav aria-label="Footer" className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-3 lg:col-span-7">
{columns.map((col) => (
<div key={col.title}>
<h3 className="text-xs font-semibold uppercase tracking-widest text-neutral-400">{col.title}</h3>
<ul className="mt-3">
{col.links.map((l) => (
<li key={l}>
<a href="#" className={`inline-flex min-h-[40px] items-center rounded text-base text-neutral-200 transition hover:text-lime-300 ${focus}`}>{l}</a>
</li>
))}
</ul>
</div>
))}
</nav>
</div>
<div className="flex flex-col gap-2 border-t border-white/10 py-6 text-sm text-neutral-400 sm:flex-row sm:items-center sm:justify-between">
<p>© 2026 Fieldnote Studio Ltd. All rights reserved.</p>
<ul className="-mx-2 flex">
{["Privacy", "Terms", "Accessibility"].map((l) => (
<li key={l}>
<a href="#" className={`inline-flex min-h-[40px] items-center rounded px-2 hover:text-white ${focus}`}>{l}</a>
</li>
))}
</ul>
</div>
</div>
</footer>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/dark-footer-with-large-call-to-action.json
People who reach the bottom of a page have read the most and are deciding what to do next. A clear request there gives them a next step on every page without repeating a separate section in each template.
Yes, in most layouts. Each page should have one `h1` near the top, and the footer pitch is a new section at the same level as the others, so `h2` fits.
Swap `bg-neutral-950` for `bg-white`, `text-white` for `text-neutral-950`, `border-white/10` for `border-neutral-200`, and move secondary text to `neutral-600`. Change the button to a dark fill with white text and update the ring offset colour in the `focus` string.
Aim for four to eight words. At this size a short question or instruction fits on two lines on a desktop and three or four on a phone. Anything longer needs a smaller type size.
No. The link has the `group` class and the arrow circle uses `group-hover:translate-x-0.5`, so it is pure CSS.
Related: Footer with Four Link Columns and Newsletter Signup, Minimal One-Line Footer with Social Icons, Dark Navbar with Dropdown Menu and Search Field, Pricing Table with Monthly and Yearly Toggle.
More footers or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.