Footer With Call To Action Band

Pro

Dark CTA band with a top-lit white radial glow, a white navigation card with brand info and link columns, and a faint blurred wordmark below, inspired by modern SaaS product footers.

When to use Footer With Call To Action Band

Two parts in a deliberate order: a dark band lit from above that asks for the next step, then a white card holding the brand details and the link columns. Conversion first, navigation second. Most footers do the opposite, and this one is worth choosing precisely when you want that inversion.

It belongs at the bottom of a landing page where the ask has not landed yet and someone scrolling to the end is still deciding. Put it under a page that has already converted its reader, or under a signed in dashboard, and the band is just a second billboard for something they have done. The blurred wordmark below the card is the only ornament and it stays out of the way of both jobs.

Block details

Category
Footers
Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
286 lines, 12 KB in one file
Install
wensity add footer-with-call-to-action-band --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
dark, cta, wordmark, clean, saas
Last updated

More footers