Footer 11 - Footer with logo, link columns, social icons, and giant brand image

Pro

Footer featuring a logo with title, three link columns, social icons, and a full-width oversized brand image at the bottom.

Vue
Shadcn Footer 11 block

Component Data

  • ID:footer11
  • Access:pro
  • Created:Jan 23, 2025
  • Type:block

Footer 11 block design & features

The top area splits into a left-aligned logo with title text and a right-aligned row of link columns plus a social section. Three columns cover Product, Company, and Legal, each with a small semibold heading and a vertical link list. The Social column displays Lucide icons for Instagram, Twitter, and LinkedIn in a horizontal row. Below all of this, a full-width PNG brand image fills the remaining space, creating a strong visual anchor.

Section headings use a subtle muted foreground color at a small semibold weight, while link text is set in default foreground at the same small size with primary-color hover states. The social icons share the muted heading color and also transition to primary on hover. The large brand image at the bottom has no border or padding, bleeding to the container edge.

The oversized image gives this footer a bold, branded personality that sets it apart from purely functional link-grid footers. The compact navigation area above it keeps the practical content tight and scannable.

On smaller screens the logo and link grid stack vertically, with the columns dropping to a two-column layout. The giant brand image remains full-width at all breakpoints, scaling down proportionally.