Footer With Four Column Links

Pro

4-column link grid with a brand header, social icons, and an oversized gradient wordmark flourish, dark-first with a chili accent bar.

When to use Footer With Four Column Links

A sitemap footer for a site that has a sitemap. Four columns, a brand header above them, social icons, and a wordmark set large enough to give the page a proper ending. The number to check before choosing it is roughly twenty: below that many links the columns start to run short and the whole band reads as padding around empty space.

It is fixed dark with a chili accent bar and no light variant, so it wants a dark page above it or a hard cut into black at the boundary. There is no newsletter field and no call to action, which is the right call for a footer whose job is to help someone find the page they could not find in the navigation. If you need the last screen to convert rather than direct, pick a footer built around a call to action instead.

Block details

Category
Footers
Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Fixed dark surface. No light variant
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
344 lines, 16 KB in one file
Install
wensity add footer-with-four-column-links --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, editorial, multi-column, wordmark
Last updated

More footers