Open demo

CSS code

HTML 
<footer class="ft">
  <div class="ft-cols">
    <div class="ft-brand">
      <b>Northwind</b>
      <p>Boards, reviews and release notes for teams that ship every week.</p>
      <ul class="ft-social">
        <li><a href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
      </ul>
    </div>
    <nav class="ft-nav" aria-label="Footer">
      <div class="ft-col">
        <h2 class="ft-h" id="ft-product-h">Product</h2>
        <button type="button" class="ft-toggle" aria-expanded="false" aria-controls="ft-product" aria-labelledby="ft-product-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-product"><li><a href="#">Overview</a></li><li><a href="#">Automations</a></li><li><a href="#">Integrations</a></li><li><a href="#">Changelog</a></li></ul>
      </div>
      <div class="ft-col">
        <h2 class="ft-h" id="ft-company-h">Company</h2>
        <button type="button" class="ft-toggle" aria-expanded="false" aria-controls="ft-company" aria-labelledby="ft-company-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-company"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul>
      </div>
      <div class="ft-col">
        <h2 class="ft-h" id="ft-resources-h">Resources</h2>
        <button type="button" class="ft-toggle" aria-expanded="false" aria-controls="ft-resources" aria-labelledby="ft-resources-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-resources"><li><a href="#">Docs</a></li><li><a href="#">API reference</a></li><li><a href="#">Guides</a></li><li><a href="#">Status</a></li></ul>
      </div>
      <div class="ft-col">
        <h2 class="ft-h" id="ft-legal-h">Legal</h2>
        <button type="button" class="ft-toggle" aria-expanded="false" aria-controls="ft-legal" aria-labelledby="ft-legal-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-legal"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li><li><a href="#">DPA</a></li></ul>
      </div>
    </nav>
  </div>
  <div class="ft-base">
    <span>© 2026 Northwind Ltd. All rights reserved.</span>
    <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Footer sitemap. Four link columns sit in <nav aria-label="Footer">, each under an <h2>. Under 768px every column
   becomes an accordion: a button (named by the heading, with aria-expanded) shows or hides its list. */
.ft{--ft-bg:#101828;--ft-text:#98a0b3;--ft-ink:#fff;--ft-line:rgba(255,255,255,.1);--ft-focus:#a5b4fc;
  width:100%;padding:44px 34px 30px;background:var(--ft-bg);color:var(--ft-text)}
.ft a{color:inherit;text-decoration:none}
.ft a:focus-visible,.ft button:focus-visible{outline:2px solid var(--ft-focus);outline-offset:2px}
.ft ul{margin:0;padding:0;list-style:none}
.ft svg{display:block}
.ft-cols{display:grid;grid-template-columns:1.4fr 4fr;gap:34px;max-width:1080px;margin:0 auto}
.ft-brand b{display:block;margin-bottom:11px;color:var(--ft-ink);font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.ft-brand p{margin:0;font-size:.85rem;line-height:1.65;max-width:32ch}
.ft .ft-social{display:flex;gap:9px;margin-top:16px}
.ft-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);
  transition:background-color .15s,color .15s}
.ft-social a:hover{background:rgba(255,255,255,.16);color:var(--ft-ink)}
.ft-social svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ft-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.ft-col{position:relative}
.ft-h{margin:0 0 13px;color:var(--ft-ink);font-size:.79rem;font-weight:800;line-height:18px;letter-spacing:.08em;text-transform:uppercase}
.ft-toggle{display:none}
.ft-col ul{display:flex;flex-direction:column;gap:10px}
.ft-col a{font-size:.86rem;transition:color .15s}
.ft-col a:hover,.ft-base a:hover{color:var(--ft-ink)}
.ft-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:1080px;margin:36px auto 0;padding-top:22px;
  border-top:1px solid var(--ft-line);font-size:.82rem}
.ft-base ul{display:flex;gap:20px}
@media (max-width:767px){
  .ft-cols,.ft-nav{grid-template-columns:1fr;gap:0}
  .ft-brand{margin-bottom:26px}
  .ft-col{border-bottom:1px solid var(--ft-line)}
  .ft-h{margin:0;padding:15px 0}
  .ft-toggle{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:flex-end;
    padding:0;border:0;background:none;color:var(--ft-ink);cursor:pointer}
  .ft-toggle:focus-visible{outline-offset:-2px}
  .ft-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s}
  .ft-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .ft-toggle[aria-expanded="false"]+ul{display:none}
  .ft-col ul{padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){.ft-social a,.ft-col a,.ft-toggle svg{transition:none}}
JavaScript 
// Mobile accordion: each button toggles its column. The buttons are display:none from 768px up, where every list shows.
document.querySelectorAll('.ft-toggle').forEach(b => b.addEventListener('click', () => {
  b.setAttribute('aria-expanded', b.getAttribute('aria-expanded') !== 'true');
}));

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<footer class="ft">
  <div class="ft-inner"><div class="row">
    <div class="col-12 col-md-3 ft-brand">
      <b>Northwind</b>
      <p>Boards, reviews and release notes for teams that ship every week.</p>
      <ul class="list-unstyled d-flex gap-2 m-0 mt-3 ft-social">
        <li><a href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
      </ul>
    </div>
    <nav class="col-12 col-md-9" aria-label="Footer">
      <div class="row">
        <div class="col-12 col-md-3 ft-col">
          <h2 class="ft-h" id="ft-product-h">Product</h2>
          <button type="button" class="ft-toggle d-md-none" data-bs-toggle="collapse" data-bs-target="#ft-product" aria-expanded="false" aria-controls="ft-product" aria-labelledby="ft-product-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
          <div class="collapse" id="ft-product"><ul class="list-unstyled m-0"><li><a href="#">Overview</a></li><li><a href="#">Automations</a></li><li><a href="#">Integrations</a></li><li><a href="#">Changelog</a></li></ul></div>
        </div>
        <div class="col-12 col-md-3 ft-col">
          <h2 class="ft-h" id="ft-company-h">Company</h2>
          <button type="button" class="ft-toggle d-md-none" data-bs-toggle="collapse" data-bs-target="#ft-company" aria-expanded="false" aria-controls="ft-company" aria-labelledby="ft-company-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
          <div class="collapse" id="ft-company"><ul class="list-unstyled m-0"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></div>
        </div>
        <div class="col-12 col-md-3 ft-col">
          <h2 class="ft-h" id="ft-resources-h">Resources</h2>
          <button type="button" class="ft-toggle d-md-none" data-bs-toggle="collapse" data-bs-target="#ft-resources" aria-expanded="false" aria-controls="ft-resources" aria-labelledby="ft-resources-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
          <div class="collapse" id="ft-resources"><ul class="list-unstyled m-0"><li><a href="#">Docs</a></li><li><a href="#">API reference</a></li><li><a href="#">Guides</a></li><li><a href="#">Status</a></li></ul></div>
        </div>
        <div class="col-12 col-md-3 ft-col">
          <h2 class="ft-h" id="ft-legal-h">Legal</h2>
          <button type="button" class="ft-toggle d-md-none" data-bs-toggle="collapse" data-bs-target="#ft-legal" aria-expanded="false" aria-controls="ft-legal" aria-labelledby="ft-legal-h"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
          <div class="collapse" id="ft-legal"><ul class="list-unstyled m-0"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li><li><a href="#">DPA</a></li></ul></div>
        </div>
      </div>
    </nav>
  </div></div>
  <div class="d-flex flex-wrap justify-content-between gap-3 ft-base">
    <span>© 2026 Northwind Ltd. All rights reserved.</span>
    <nav aria-label="Legal"><ul class="list-unstyled d-flex m-0"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Bootstrap grid footer. The four link columns sit in <nav aria-label="Footer">. Below the md breakpoint each column is a
   .collapse toggled by a button (Collapse plugin keeps aria-expanded in sync); from md up the lists are always shown. */
.ft{--ft-bg:#101828;--ft-text:#98a0b3;--ft-ink:#fff;--ft-line:rgba(255,255,255,.1);--ft-focus:#a5b4fc;
  width:100%;padding:44px 34px 30px;background:var(--ft-bg);color:var(--ft-text)}
.ft a{color:inherit;text-decoration:none}
.ft a:focus-visible,.ft button:focus-visible{outline:2px solid var(--ft-focus);outline-offset:2px;box-shadow:none}
.ft svg{display:block}
.ft-inner{max-width:1080px;margin:0 auto}
.ft .row{--bs-gutter-x:34px;--bs-gutter-y:0}
.ft-brand b{display:block;margin-bottom:11px;color:var(--ft-ink);font-size:1.06rem;font-weight:800;letter-spacing:-.02em}
.ft-brand p{margin:0;font-size:.85rem;line-height:1.65;max-width:32ch}
.ft-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.07);
  transition:background-color .15s,color .15s}
.ft-social a:hover{background:rgba(255,255,255,.16);color:var(--ft-ink)}
.ft-social svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.ft-col{position:relative}
.ft-h{margin:0 0 13px;color:var(--ft-ink);font-size:.79rem;font-weight:800;line-height:18px;letter-spacing:.08em;text-transform:uppercase}
.ft-col ul{display:flex;flex-direction:column;gap:10px}
.ft-col a{font-size:.86rem;transition:color .15s}
.ft-col a:hover,.ft-base a:hover{color:var(--ft-ink)}
.ft-base ul{gap:20px}
.ft-base{max-width:1080px;margin:36px auto 0;padding-top:22px;border-top:1px solid var(--ft-line);font-size:.82rem}
@media (min-width:768px){.ft .collapse:not(.show){display:block}}
@media (max-width:767.98px){
  .ft .row{--bs-gutter-x:0}
  .ft-brand{margin-bottom:26px}
  .ft-col{border-bottom:1px solid var(--ft-line)}
  .ft-h{margin:0;padding:15px 0}
  .ft-toggle{position:absolute;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:flex-end;
    padding:0;border:0;background:none;color:var(--ft-ink)}
  .ft-toggle:focus-visible{outline-offset:-2px}
  .ft-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s}
  .ft-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .ft-col ul{padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){.ft-social a,.ft-col a,.ft-toggle svg,.ft .collapsing{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="w-full bg-[#101828] px-[34px] pt-11 pb-[30px] text-[#98a0b3]">
  <div class="mx-auto grid max-w-[1080px] grid-cols-[1.4fr_4fr] gap-[34px] max-md:grid-cols-1 max-md:gap-0">
    <div class="max-md:mb-[26px]">
      <b class="mb-[11px] block text-[1.06rem] font-extrabold tracking-[-.02em] text-white">Northwind</b>
      <p class="max-w-[32ch] text-[.85rem] leading-[1.65]">Boards, reviews and release notes for teams that ship every week.</p>
      <ul class="mt-4 flex gap-[9px]">
        <li><a class="grid size-[34px] place-items-center rounded-[9px] bg-white/7 transition-[color,background-color,border-color] duration-150 hover:bg-white/16 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#" aria-label="Northwind on X"><svg class="size-[15px] fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
        <li><a class="grid size-[34px] place-items-center rounded-[9px] bg-white/7 transition-[color,background-color,border-color] duration-150 hover:bg-white/16 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#" aria-label="Northwind on GitHub"><svg class="size-[15px] fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
        <li><a class="grid size-[34px] place-items-center rounded-[9px] bg-white/7 transition-[color,background-color,border-color] duration-150 hover:bg-white/16 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#" aria-label="Northwind on LinkedIn"><svg class="size-[15px] fill-none stroke-current stroke-2" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
      </ul>
    </div>
    <nav class="grid grid-cols-4 gap-[34px] max-md:grid-cols-1 max-md:gap-0" aria-label="Footer">
      <div class="relative max-md:border-b max-md:border-white/10">
        <h2 class="mb-[13px] text-[.79rem] leading-[18px] font-extrabold tracking-[.08em] text-white uppercase max-md:m-0 max-md:py-[15px]" id="ft-product-h">Product</h2>
        <button type="button" class="peer absolute inset-x-0 top-0 hidden h-12 cursor-pointer items-center justify-end text-white max-md:flex focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#a5b4fc] [&[aria-expanded=true]>svg]:rotate-180" aria-expanded="false" aria-controls="ft-product" aria-labelledby="ft-product-h"><svg class="size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-product" class="flex flex-col gap-2.5 max-md:pb-4 max-md:peer-aria-[expanded=false]:hidden"><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Overview</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Automations</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Integrations</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Changelog</a></li></ul>
      </div>
      <div class="relative max-md:border-b max-md:border-white/10">
        <h2 class="mb-[13px] text-[.79rem] leading-[18px] font-extrabold tracking-[.08em] text-white uppercase max-md:m-0 max-md:py-[15px]" id="ft-company-h">Company</h2>
        <button type="button" class="peer absolute inset-x-0 top-0 hidden h-12 cursor-pointer items-center justify-end text-white max-md:flex focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#a5b4fc] [&[aria-expanded=true]>svg]:rotate-180" aria-expanded="false" aria-controls="ft-company" aria-labelledby="ft-company-h"><svg class="size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-company" class="flex flex-col gap-2.5 max-md:pb-4 max-md:peer-aria-[expanded=false]:hidden"><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">About</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Careers</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Press</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Contact</a></li></ul>
      </div>
      <div class="relative max-md:border-b max-md:border-white/10">
        <h2 class="mb-[13px] text-[.79rem] leading-[18px] font-extrabold tracking-[.08em] text-white uppercase max-md:m-0 max-md:py-[15px]" id="ft-resources-h">Resources</h2>
        <button type="button" class="peer absolute inset-x-0 top-0 hidden h-12 cursor-pointer items-center justify-end text-white max-md:flex focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#a5b4fc] [&[aria-expanded=true]>svg]:rotate-180" aria-expanded="false" aria-controls="ft-resources" aria-labelledby="ft-resources-h"><svg class="size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-resources" class="flex flex-col gap-2.5 max-md:pb-4 max-md:peer-aria-[expanded=false]:hidden"><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Docs</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">API reference</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Guides</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Status</a></li></ul>
      </div>
      <div class="relative max-md:border-b max-md:border-white/10">
        <h2 class="mb-[13px] text-[.79rem] leading-[18px] font-extrabold tracking-[.08em] text-white uppercase max-md:m-0 max-md:py-[15px]" id="ft-legal-h">Legal</h2>
        <button type="button" class="peer absolute inset-x-0 top-0 hidden h-12 cursor-pointer items-center justify-end text-white max-md:flex focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#a5b4fc] [&[aria-expanded=true]>svg]:rotate-180" aria-expanded="false" aria-controls="ft-legal" aria-labelledby="ft-legal-h"><svg class="size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></button>
        <ul id="ft-legal" class="flex flex-col gap-2.5 max-md:pb-4 max-md:peer-aria-[expanded=false]:hidden"><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Privacy</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Terms</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Security</a></li><li><a class="text-[.86rem] transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">DPA</a></li></ul>
      </div>
    </nav>
  </div>
  <div class="mx-auto mt-9 flex max-w-[1080px] flex-wrap justify-between gap-4 border-t border-white/10 pt-[22px] text-[.82rem]">
    <span>© 2026 Northwind Ltd. All rights reserved.</span>
    <nav aria-label="Legal"><ul class="flex gap-5"><li><a class="transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Privacy</a></li><li><a class="transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Terms</a></li><li><a class="transition-[color,background-color,border-color] duration-150 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#a5b4fc] motion-reduce:transition-none" href="#">Cookies</a></li></ul></nav>
  </div>
</footer>
JavaScript 
// Mobile accordion: each button toggles its column. The buttons are hidden from the md breakpoint up, where every list shows.
document.querySelectorAll('button[aria-controls^="ft-"]').forEach(b => b.addEventListener('click', () => {
  b.setAttribute('aria-expanded', b.getAttribute('aria-expanded') !== 'true');
}));

About this set

A dark site footer with a brand column and four link columns (Product, Company, Resources, Legal), finished with a copyright line and a short row of legal links. The brand column holds the name, a one-line description and three square social icon links. Under 768px the layout stacks and every link column becomes an accordion, so a long sitemap does not push the copyright line far down a phone screen. Use it on marketing sites and SaaS products that list their whole sitemap in the footer. The columns sit in nav aria-label=”Footer” under real h2 headings. On mobile each column gets a button, named by its heading through aria-labelledby and carrying aria-expanded, that covers the heading row so the whole row is the tap target; its chevron flips when the list opens. The columns start collapsed on mobile. From 768px up the buttons are display:none and every list is visible, so desktop visitors never meet a collapsed column or a heading that does nothing when clicked. The Bootstrap version builds the grid from .row and .col-md-* and the accordion from the Collapse plugin.

What’s included

  • Brand column with social icon links and four sitemap columns
  • Columns become accordions below 768px and are always open above it
  • Accordion buttons named by the column headings
  • Separate legal links row with its own nav label
  • Bootstrap version uses the grid and the Collapse plugin

Accessibility

Sitemap links sit in a nav labelled Footer under h2 headings, and the bottom links in a nav labelled Legal. Social links have names such as "Northwind on GitHub". On mobile each column's button takes its name from the heading and reports aria-expanded; on wider screens it is removed entirely. Focus shows a light indigo outline that stays visible on the dark background, and the transitions switch off under prefers-reduced-motion.

Customise it

Change --ft-bg, --ft-text, --ft-ink, --ft-line and --ft-focus on .ft (the same names work in the Bootstrap version); the 1.4fr 4fr grid on .ft-cols sets the brand column's share. In Tailwind edit the #101828 and #98a0b3 values and the max-md: utilities.