Footer Navigation

Grouped link columns within the footer.

html

<footer class="ffoot ffoot--3 ffoot--divider" style="background:#FAF7F2;">
  <nav aria-label="Footer" class="ffoot__nav">
    <div>
      <p class="ffoot__heading" style="color:#241430;">Product</p>
      <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li><li><a href="#">Changelog</a></li></ul>
    </div>
    <div>
      <p class="ffoot__heading" style="color:#241430;">Company</p>
      <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Blog</a></li></ul>
    </div>
    <div>
      <p class="ffoot__heading" style="color:#241430;">Legal</p>
      <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
    </div>
    <div>
      <p class="ffoot__heading" style="color:#241430;">Resources</p>
      <ul><li><a href="#">Docs</a></li><li><a href="#">Support</a></li></ul>
    </div>
  </nav>
</footer>
<style>
.ffoot { font: 14px/1.6 system-ui, sans-serif; color: #241430; padding: 32px 24px; }
.ffoot--divider { border-top: 1px solid #24143018; }
.ffoot__nav { display: grid; gap: 24px; }
.ffoot--2 .ffoot__nav { grid-template-columns: repeat(2, 1fr); }
.ffoot--3 .ffoot__nav { grid-template-columns: repeat(3, 1fr); }
.ffoot--4 .ffoot__nav { grid-template-columns: repeat(4, 1fr); }
.ffoot--2 .ffoot__nav > div:nth-child(n+3) { display: none; }
.ffoot--3 .ffoot__nav > div:nth-child(4) { display: none; }
.ffoot__heading { margin: 0 0 10px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ffoot__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ffoot__nav a { color: #241430cc; text-decoration: none; }
.ffoot__nav a:hover, .ffoot__nav a:focus-visible { text-decoration: underline; color: #241430; }
</style>

tailwind

<footer class="ffoot-tw ffoot-tw--3 border-t border-[#24143018] font-sans text-sm text-[#241430] px-6 py-8" style="background:#FAF7F2;">
  <nav aria-label="Footer" class="ffoot-tw__nav grid gap-6">
    <div>
      <p class="m-0 mb-2.5 font-bold text-xs uppercase tracking-wide" style="color:#241430;">Product</p>
      <ul class="list-none m-0 p-0 flex flex-col gap-1.5"><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Features</a></li><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Pricing</a></li><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Changelog</a></li></ul>
    </div>
    <div>
      <p class="m-0 mb-2.5 font-bold text-xs uppercase tracking-wide" style="color:#241430;">Company</p>
      <ul class="list-none m-0 p-0 flex flex-col gap-1.5"><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">About</a></li><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Careers</a></li><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Blog</a></li></ul>
    </div>
    <div>
      <p class="m-0 mb-2.5 font-bold text-xs uppercase tracking-wide" style="color:#241430;">Legal</p>
      <ul class="list-none m-0 p-0 flex flex-col gap-1.5"><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Privacy</a></li><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Terms</a></li></ul>
    </div>
    <div>
      <p class="m-0 mb-2.5 font-bold text-xs uppercase tracking-wide" style="color:#241430;">Resources</p>
      <ul class="list-none m-0 p-0 flex flex-col gap-1.5"><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Docs</a></li><li><a href="#" class="text-[#241430]/80 no-underline hover:underline hover:text-[#241430]">Support</a></li></ul>
    </div>
  </nav>
</footer>
<style>
.ffoot-tw--2 .ffoot-tw__nav { grid-template-columns: repeat(2, 1fr); }
.ffoot-tw--3 .ffoot-tw__nav { grid-template-columns: repeat(3, 1fr); }
.ffoot-tw--4 .ffoot-tw__nav { grid-template-columns: repeat(4, 1fr); }
.ffoot-tw--2 .ffoot-tw__nav > div:nth-child(n+3) { display: none; }
.ffoot-tw--3 .ffoot-tw__nav > div:nth-child(4) { display: none; }
</style>

react

export function FooterNavigation({
  columns = "3",
  accent = "#241430",
  bg = "#FAF7F2",
  showDivider = true,
}) {
  const groups = [
    { title: "Product", links: ["Features", "Pricing", "Changelog"] },
    { title: "Company", links: ["About", "Careers", "Blog"] },
    { title: "Legal", links: ["Privacy", "Terms"] },
    { title: "Resources", links: ["Docs", "Support"] },
  ].slice(0, Number(columns));
  return (
    <footer style={{ font: "14px/1.6 system-ui, sans-serif", color: "#241430", padding: "32px 24px", background: bg,
      borderTop: showDivider ? "1px solid #24143018" : "none" }}>
      <nav aria-label="Footer" style={{ display: "grid", gap: 24, gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {groups.map((group) => (
          <div key={group.title}>
            <p style={{ margin: "0 0 10px", fontWeight: 700, fontSize: 12, textTransform: "uppercase", letterSpacing: "0.04em", color: accent }}>{group.title}</p>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
              {group.links.map((link) => (
                <li key={link}><a href="#" style={{ color: "#241430cc", textDecoration: "none" }}>{link}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </nav>
    </footer>
  );
}