Skip to content
Browse themes
Marketing block

Mega Footer with Link Columns

Brand column, four labelled nav columns, socials and a legal bar — the one place every page links to every section. Ships no client JavaScript.

265 lineslucide-reactAdded 8 Aug 2026Updated 13 Sept 2026
  • footer
  • links
  • sitemap
  • columns
  • seo

What's included

  • components/footer-mega.tsx
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add footer-mega

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/footer-mega.tsx
/**
 * <FooterMega> — brand column, four link columns, newsletter, legal bar.
 *
 * The footer of a site that has enough pages to need one. Its real job is
 * not decoration: it is the only place every page links to every section,
 * which is what lets a crawler that landed deep in the site reach the rest
 * of it — and what lets a visitor who scrolled past what they wanted find
 * it without going back to the nav.
 *
 * Structure that matters more than it looks:
 *
 *  - Each column is a `<nav>` with an `aria-labelledby` pointing at its own
 *    heading, so a screen reader announces "Product navigation" rather than
 *    four unlabelled lists of links.
 *  - The headings are real `<h2>`s. A footer built from styled divs is
 *    invisible to anyone navigating by heading, which is most of the point
 *    of having one.
 *  - Social links carry visible-to-assistive-tech names; an icon-only link
 *    with no accessible name is announced as its URL.
 *
 * No client JavaScript: it is links, and a footer that hydrates on every
 * page to render links is a cost with nothing on the other side of it. If
 * you want an email capture down here, reach for <FooterNewsletter>, which
 * is this layout with the form and the `'use client'` that comes with it.
 *
 * `year` defaults to the current year, which for a statically rendered page
 * means the year it was built. Pass it explicitly if you rebuild rarely.
 */

import * as React from 'react'
import { Github, Linkedin, Twitter, Youtube } from 'lucide-react'

export interface FooterLink {
  label: string
  href: string
  /** Renders a small chip beside the link — "New", "Beta". */
  badge?: string
}

export interface FooterColumn {
  heading: string
  links: FooterLink[]
}

export interface FooterMegaProps {
  brand?: string
  tagline?: string
  columns?: FooterColumn[]
  /** Status strip — the one thing a footer says that changes. */
  statusLabel?: string
  statusHref?: string
  regionNote?: string
  legalLinks?: FooterLink[]
  year?: number
  className?: string
}

const DEFAULT_COLUMNS: FooterColumn[] = [
  {
    heading: 'Product',
    links: [
      { label: 'Overview', href: '#' },
      { label: 'Features', href: '#' },
      { label: 'Pricing', href: '#' },
      { label: 'Integrations', href: '#', badge: 'New' },
      { label: 'Changelog', href: '#' },
    ],
  },
  {
    heading: 'Developers',
    links: [
      { label: 'Documentation', href: '#' },
      { label: 'API reference', href: '#' },
      { label: 'CLI', href: '#' },
      { label: 'Status', href: '#' },
      { label: 'Open source', href: '#' },
    ],
  },
  {
    heading: 'Company',
    links: [
      { label: 'About', href: '#' },
      { label: 'Blog', href: '#' },
      { label: 'Careers', href: '#', badge: '3' },
      { label: 'Customers', href: '#' },
      { label: 'Contact', href: '#' },
    ],
  },
  {
    heading: 'Resources',
    links: [
      { label: 'Help centre', href: '#' },
      { label: 'Community', href: '#' },
      { label: 'Templates', href: '#' },
      { label: 'Guides', href: '#' },
      { label: 'Security', href: '#' },
    ],
  },
]

const DEFAULT_LEGAL: FooterLink[] = [
  { label: 'Privacy', href: '#' },
  { label: 'Terms', href: '#' },
  { label: 'Cookies', href: '#' },
]

const SOCIALS = [
  { label: 'GitHub', href: '#', Icon: Github },
  { label: 'Twitter', href: '#', Icon: Twitter },
  { label: 'LinkedIn', href: '#', Icon: Linkedin },
  { label: 'YouTube', href: '#', Icon: Youtube },
]

const slug = (value: string) => value.toLowerCase().replace(/[^a-z0-9]+/g, '-')

/**
 * Slug for wiring a column's heading to its nav landmark.
 *
 * Prefixed `footer-mega-`, not `footer-`, because this block is previewed on
 * /blocks alongside the site's own footer — which builds its ids the same way
 * from the same column names ("Company", "Developers"). Two elements then
 * share an id, and `aria-labelledby` resolves to whichever comes first in the
 * document: the preview. The real footer's navs end up labelled by a
 * decorative copy of themselves. `footer-newsletter.tsx` already carries a
 * `footer-nl-` prefix for exactly this reason.
 *
 * The brand is in the id for the next size of the same problem: a fixed
 * prefix separates this block from *other* footers and does nothing about
 * two <FooterMega>s on one page, which is what a catalog hub rendering
 * several sites at once actually is. Nearly every column set contains
 * "Company", so the collision is close to guaranteed.
 *
 * `React.useId()` would be the textbook fix and is not available: this block
 * has no `'use client'` and is not going to get one. It renders links, and
 * a footer that hydrates on every page to render links is a cost with
 * nothing on the other side of it — see the note at the top of the file.
 *
 * The brand alone was the discriminator until a catalog hub rendered three
 * pages that were all called "Acme", which is the failure mode of choosing
 * exactly one prop: it works until two callers happen to agree. The tagline
 * joins it because a real second site on the same page has a different one,
 * and because between them they are the two props nobody leaves at the
 * default on something they actually ship.
 */
function headingId(brand: string, tagline: string, heading: string): string {
  let hash = 0
  for (let i = 0; i < tagline.length; i++) hash = (Math.imul(hash, 31) + tagline.charCodeAt(i)) | 0
  return `footer-mega-${slug(brand)}-${(hash >>> 0).toString(36).slice(0, 4)}-${slug(heading)}`
}

export function FooterMega({
  brand = 'Acme',
  tagline = 'The toolkit for teams who would rather ship than configure.',
  columns = DEFAULT_COLUMNS,
  statusLabel = 'All systems operational',
  statusHref = '#',
  regionNote = 'Served from 14 regions worldwide',
  legalLinks = DEFAULT_LEGAL,
  year = new Date().getFullYear(),
  className = '',
}: FooterMegaProps) {
  return (
    <footer className={`border-t border-border/60 bg-card/30 ${className}`}>
      <div className="mx-auto w-full max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
        <div className="grid gap-10 lg:grid-cols-12">
          {/* -- Brand ------------------------------------------------- */}
          <div className="lg:col-span-4">
            <a href="#" className="inline-flex items-center gap-2.5">
              <span
                aria-hidden
                className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-emerald-600 text-sm font-black text-primary-foreground shadow-lg shadow-primary/25"
              >
                {brand.slice(0, 1)}
              </span>
              <span className="text-base font-bold tracking-tight">{brand}</span>
            </a>

            <p className="mt-4 max-w-xs text-sm leading-relaxed text-muted-foreground">
              {tagline}
            </p>

            <div className="mt-6 flex gap-2">
              {SOCIALS.map(({ label, href, Icon }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  className="flex h-9 w-9 items-center justify-center rounded-lg border border-border/60 text-muted-foreground transition-colors hover:bg-card hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  <Icon aria-hidden className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>

          {/* -- Link columns ------------------------------------------ */}
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-8">
            {columns.map((column) => (
              <nav key={column.heading} className="min-w-0" aria-labelledby={headingId(brand, tagline, column.heading)}>
                <h2
                  id={headingId(brand, tagline, column.heading)}
                  className="truncate text-xs font-semibold uppercase tracking-wider text-foreground"
                >
                  {column.heading}
                </h2>
                <ul className="mt-4 space-y-2.5">
                  {column.links.map((link) => (
                    <li key={link.label}>
                      <a
                        href={link.href}
                        className="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                      >
                        <span className="min-w-0 truncate">{link.label}</span>
                        {link.badge ? (
                          <span className="shrink-0 rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
                            {link.badge}
                          </span>
                        ) : null}
                      </a>
                    </li>
                  ))}
                </ul>
              </nav>
            ))}
          </div>
        </div>

        {/* -- Status strip -------------------------------------------- */}
        <div className="mt-12 flex flex-col gap-3 rounded-2xl border border-border/60 bg-background/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
          <a
            href={statusHref}
            className="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          >
            <span aria-hidden className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full rounded-full bg-emerald-500/60 border border-transparent" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500 border border-transparent" />
            </span>
            {statusLabel}
          </a>
          <p className="text-sm text-muted-foreground">{regionNote}</p>
        </div>

        {/* -- Legal bar ----------------------------------------------- */}
        <div className="mt-10 flex flex-col-reverse items-center gap-4 border-t border-border/60 pt-6 sm:flex-row sm:justify-between">
          <p className="text-xs text-muted-foreground">
            © {year} {brand}, Inc. All rights reserved.
          </p>
          <ul className="flex flex-wrap items-center gap-x-5 gap-y-2">
            {legalLinks.map((link) => (
              <li key={link.label}>
                <a
                  href={link.href}
                  className="text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  )
}

Before you paste

  • Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
  • Install: npm i lucide-react
  • Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/footer-mega.tsx and import it where you need the section:

import { FooterMega } from '@/components/footer-mega'

Customize

5 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

PropTypeDefault
brandstring'Acme'
taglinestring'The toolkit for teams who would rather ship …
columnsFooterColumn[]DEFAULT_COLUMNS
statusLabelStatus strip — the one thing a footer says that changes.string'All systems operational'
statusHrefstring'#'
regionNotestring'Served from 14 regions worldwide'
legalLinksFooterLink[]DEFAULT_LEGAL
yearnumbernew Date().getFullYear()
classNamestring''

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

footer-mega.html
<!--
  Mega Footer with Link Columns — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<footer class="border-t border-border/60 bg-card/30 ">
  <div class="mx-auto w-full max-w-7xl px-4 py-14 sm:px-6 lg:px-8">
    <div class="grid gap-10 lg:grid-cols-12">
      <div class="lg:col-span-4">
        <a href="#" class="inline-flex items-center gap-2.5">
          <span aria-hidden="true" class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-primary to-emerald-600 text-sm font-black text-primary-foreground shadow-lg shadow-primary/25">A</span>
          <span class="text-base font-bold tracking-tight">Acme</span>
        </a>
        <p class="mt-4 max-w-xs text-sm leading-relaxed text-muted-foreground">The toolkit for teams who would rather ship than configure.</p>
        <div class="mt-6 flex gap-2">
          <a href="#" aria-label="GitHub" class="flex h-9 w-9 items-center justify-center rounded-lg border border-border/60 text-muted-foreground transition-colors hover:bg-card hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github h-4 w-4" aria-hidden="true">
              <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
              <path d="M9 18c-4.51 2-5-2-7-2"></path>
            </svg>
          </a>
          <a href="#" aria-label="Twitter" class="flex h-9 w-9 items-center justify-center rounded-lg border border-border/60 text-muted-foreground transition-colors hover:bg-card hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-4 w-4" aria-hidden="true">
              <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
            </svg>
          </a>
          <a href="#" aria-label="LinkedIn" class="flex h-9 w-9 items-center justify-center rounded-lg border border-border/60 text-muted-foreground transition-colors hover:bg-card hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-4 w-4" aria-hidden="true">
              <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
              <rect width="4" height="12" x="2" y="9"></rect>
              <circle cx="4" cy="4" r="2"></circle>
            </svg>
          </a>
          <a href="#" aria-label="YouTube" class="flex h-9 w-9 items-center justify-center rounded-lg border border-border/60 text-muted-foreground transition-colors hover:bg-card hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube h-4 w-4" aria-hidden="true">
              <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path>
              <path d="m10 15 5-3-5-3z"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:col-span-8">
        <nav class="min-w-0" aria-labelledby="footer-mega-acme-1uha-product">
          <h2 id="footer-mega-acme-1uha-product" class="truncate text-xs font-semibold uppercase tracking-wider text-foreground">Product</h2>
          <ul class="mt-4 space-y-2.5">
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Overview</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Features</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Pricing</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Integrations</span>
                <span class="shrink-0 rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] font-semibold text-primary">New</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Changelog</span>
              </a>
            </li>
          </ul>
        </nav>
        <nav class="min-w-0" aria-labelledby="footer-mega-acme-1uha-developers">
          <h2 id="footer-mega-acme-1uha-developers" class="truncate text-xs font-semibold uppercase tracking-wider text-foreground">Developers</h2>
          <ul class="mt-4 space-y-2.5">
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Documentation</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">API reference</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">CLI</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Status</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Open source</span>
              </a>
            </li>
          </ul>
        </nav>
        <nav class="min-w-0" aria-labelledby="footer-mega-acme-1uha-company">
          <h2 id="footer-mega-acme-1uha-company" class="truncate text-xs font-semibold uppercase tracking-wider text-foreground">Company</h2>
          <ul class="mt-4 space-y-2.5">
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">About</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Blog</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Careers</span>
                <span class="shrink-0 rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] font-semibold text-primary">3</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Customers</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Contact</span>
              </a>
            </li>
          </ul>
        </nav>
        <nav class="min-w-0" aria-labelledby="footer-mega-acme-1uha-resources">
          <h2 id="footer-mega-acme-1uha-resources" class="truncate text-xs font-semibold uppercase tracking-wider text-foreground">Resources</h2>
          <ul class="mt-4 space-y-2.5">
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Help centre</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Community</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Templates</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Guides</span>
              </a>
            </li>
            <li>
              <a href="#" class="inline-flex max-w-full items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                <span class="min-w-0 truncate">Security</span>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="mt-12 flex flex-col gap-3 rounded-2xl border border-border/60 bg-background/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
      <a href="#" class="inline-flex items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"><span aria-hidden="true" class="relative flex h-2 w-2"><span class="absolute inline-flex h-full w-full rounded-full bg-emerald-500/60 border border-transparent"></span><span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-500 border border-transparent"></span></span>All systems operational</a>
      <p class="text-sm text-muted-foreground">Served from 14 regions worldwide</p>
    </div>
    <div class="mt-10 flex flex-col-reverse items-center gap-4 border-t border-border/60 pt-6 sm:flex-row sm:justify-between">
      <p class="text-xs text-muted-foreground">© 2026 Acme, Inc. All rights reserved.</p>
      <ul class="flex flex-wrap items-center gap-x-5 gap-y-2">
        <li>
          <a href="#" class="text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Privacy</a>
        </li>
        <li>
          <a href="#" class="text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Terms</a>
        </li>
        <li>
          <a href="#" class="text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Cookies</a>
        </li>
      </ul>
    </div>
  </div>
</footer>
  • This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
  • It is one frame: the component in its initial state, with no props applied beyond the defaults.
  • This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
  • Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
4 more blocks in Footers
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Footers
Shipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once
More Footers blocks
View category
Open the full page for this block
Footer with Newsletter Band
A raised email-capture band overlapping a three-column link footer, with the confirmation replacing the field in place rather than navigating away.
Footers260 lines1 dep
Open the full page for this block
Regulated Seller Footer
Legal entity, company number, registered address, VAT and the consumer links an EU or UK seller has to publish — with a region control that changes the terms, not just the currency.
Footers287 lines1 dep