Footer With Two Column Layout

Pro

Premium dark footer with a clean two-column layout, with brand identity and social icons on the left and navigation columns on the right. Giant ultra-bold wordmark at the base with a cursor-tracking gradient reveal on hover.

When to use Footer With Two Column Layout

Two columns where most footers use four, and that constraint is the point. Brand, a line of positioning and the social icons hold the left; every link the site has stacks on the right. The eye takes in who you are before it starts scanning where to go, which is the correct order for a product most visitors are meeting for the first time.

It fits comfortably up to about a dozen links and starts to look cramped past that, so it suits a focused product rather than a platform. The ultra bold wordmark across the base stays flat until the cursor crosses it and then reveals a gradient beneath the letters. That single effect is the entire personality of the block, which also means it does nothing at all on a touch device, where the footer simply reads as clean and quiet.

Block details

Category
Footers
Renders
JavaScript animation. Paints first, then animates
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxframer-motiontailwind-merge
Source
390 lines, 16 KB in one file
Install
wensity add footer-with-two-column-layout --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, wordmark, interactive, two-column, premium
Last updated

More footers