# Footer Section v3

> Card-wrapped footer with five link columns and a Privacy / Terms bottom bar. No hover icons on links.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/footer-section-v3).

- Page, with a live preview: https://shadcn.exchange/r/uiception/footer-section-v3
- Screenshot: https://shadcn.exchange/shot/uiception/footer-section-v3/light.png
- Registry item: https://uiception.com/r/footer-section-v3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/footer-section-v3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://uiception.com/r/block-media.json`, `card`

## Files

### `registry/new-york/blocks/footer-section-v3/page.tsx`

```tsx
import FooterSectionV3 from "./components/footer-section-v3"

export default function Page() {
  return <FooterSectionV3 />
}
```

### `registry/new-york/blocks/footer-section-v3/components/footer-section-v3.tsx`

```tsx
import Image from "next/image"
import { createBlockImage } from "@/lib/block-media"
import Link from "next/link"

const blockImage = createBlockImage("footer-section-v3")
import { Card, CardHeader } from "@/components/ui/card"

const LOGO_SRC = blockImage("logo.svg")

type FooterLink = {
  label: string
  href: string
}

const footerColumns: { title: string; links: FooterLink[] }[] = [
  {
    title: "Product",
    links: [
      { label: "Build", href: "#" },
      { label: "Monitor", href: "#" },
      { label: "Plan", href: "#" },
      { label: "Pricing", href: "#" },
      { label: "Security", href: "#" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "#" },
      { label: "Blog", href: "#" },
      { label: "Brand", href: "#" },
      { label: "Careers", href: "#" },
      { label: "Customers", href: "#" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Developers", href: "#" },
      { label: "Documentation", href: "#" },
      { label: "Download", href: "#" },
      { label: "Enterprise", href: "#" },
      { label: "Status", href: "#" },
    ],
  },
  {
    title: "Connect",
    links: [
      { label: "Community", href: "#" },
      { label: "Contact us", href: "#" },
      { label: "GitHub", href: "#" },
      { label: "X (Twitter)", href: "#" },
      { label: "YouTube", href: "#" },
    ],
  },
]

export default function FooterSectionV3() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-7xl px-4">
        <Card className="rounded-none">
          <CardHeader className="block px-6 py-7 md:px-8 md:py-8">
            <div className="grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-[1fr_1fr_1fr_1fr_1fr]">

              <div className="col-span-2 lg:col-span-1">
                <Link href="#" className="inline-flex w-fit">
                  <Image
                    alt="Logo"
                    src={LOGO_SRC}
                    width={32}
                    height={32}
                    className="size-8 shrink-0"
                    unoptimized
                  />
                </Link>
              </div>

              {footerColumns.map((column) => (
                <div key={column.title} className="space-y-3">
                  <h2 className="text-sm font-medium text-card-foreground">
                    {column.title}
                  </h2>
                  <ul className="space-y-2.5">
                    {column.links.map((link) => (
                      <li key={`${column.title}-${link.label}`}>
                        <Link
                          href={link.href}
                          className="text-sm text-muted-foreground no-underline transition-colors hover:text-card-foreground"
                        >
                          {link.label}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </CardHeader>
          <div className="border-border px-6 py-5 md:px-8 md:py-6">
            <div className="grid grid-cols-2 gap-x-8 lg:grid-cols-[1fr_1fr_1fr_1fr_1fr]">
              <div className="hidden lg:block" />
              <div className="flex gap-6">
                <Link
                  href="#"
                  className="text-sm text-muted-foreground no-underline transition-colors hover:text-card-foreground"
                >
                  Privacy
                </Link>
                <Link
                  href="#"
                  className="text-sm text-muted-foreground no-underline transition-colors hover:text-card-foreground"
                >
                  Terms
                </Link>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </section>
  )
}
```

### `public/images/blocks/footer-section-v3/logo.svg.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```