Footer With Four Column Links
Pro4-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
