Footer — Single row

Identity and copyright, four links and social icons share one desktop row, and mobile stacks the three groups. Use it on a short page or an app shell.

ReactHTML

1440 × 900

Open in new tab

Component.tsx115 lines

export default function FooterSingleRow() {
  return (
    <footer className="border-t border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 py-8 md:flex-row md:items-center md:justify-between md:gap-6">
        <div className="flex flex-wrap items-center gap-3">
          <a
            href="#"
            aria-label="Logo home"
            className="inline-flex items-center gap-2 font-semibold text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-6"
            >
              <rect x="4" y="4" width="16" height="16" rx="3" />
              <path d="M4 12h16M12 4v16" />
            </svg>
            Logo
          </a>
          <p className="text-sm text-neutral-500">© 2026 Site name</p>
        </div>
        <nav aria-label="Footer navigation" className="flex flex-wrap gap-x-4 gap-y-3">
          <a
            href="#"
            className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Product
          </a>
          <a
            href="#"
            className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            About
          </a>
          <a
            href="#"
            className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Privacy
          </a>
          <a
            href="#"
            className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Terms
          </a>
        </nav>
        <nav aria-label="Social profiles" className="flex flex-wrap items-center gap-4">
          <a
            href="#"
            aria-label="Community profile"
            className="text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-5"
            >
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M16 4a4 4 0 0 1 0 8M22 21v-2a4 4 0 0 0-3-3.9" />
              <circle cx="9" cy="7" r="4" />
            </svg>
          </a>
          <a
            href="#"
            aria-label="Updates feed"
            className="text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-5"
            >
              <path d="M4 4a16 16 0 0 1 16 16M4 10a10 10 0 0 1 10 10" />
              <circle cx="4" cy="20" r="1" />
            </svg>
          </a>
          <a
            href="#"
            aria-label="Video channel"
            className="text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-5"
            >
              <path d="M3 5h18v14H3zM10 9l5 3-5 3z" />
            </svg>
          </a>
        </nav>
      </div>
    </footer>
  )
}

Pattern notes

When to use: Use on a short page or app shell. Choose footer-centered-links for a centred close with more destinations. Variations: omit social links, replace Product with Help, or show copyright alone in the first group.
Hierarchy: Logo and year lead, then four 14px destinations and social links. Limit copyright to 4 words and links to 1 word. Social glyphs are decorative inside named links.
Responsive: Below 768px the three groups stack left aligned with 16px gaps. At 768px they share a justified row. Links and identity wrap at any width to prevent overflow.
Layout: A white footer has a neutral-200 top border and a 1152px max-w-6xl container with 24px side and 32px vertical padding. At 768px a justified flex row aligns three groups with 24px gaps: Logo and 14px copyright, four-link nav with 16px gaps, and three 20px social glyphs with 16px gaps. Identity may wrap inside its group.
States: Text links hover from neutral-900 to neutral-600. Social glyphs hover to neutral-600. There are no open or selected states. Every enabled control has a 2px neutral-900 focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Logo  Copyright      Product About Privacy Terms   [Social]  │
└──────────────────────────────────────────────────────────────┘

View all

Footer — Accordion sitemap
Layout tags: stacked,list,compact
Footer — Address beside a map
Layout tags: asymmetric,media,spacious
Footer — Brand and link columns
Layout tags: asymmetric,grid,compact

Footer — Single row

Pattern notes

More in Footer

Footer — Accordion sitemap

Footer — Address beside a map

Footer — Brand and link columns