Site footer

A full-width page footer with multi-column link groups, social icons, and a bottom bar for legal text. The --inverse modifier flips to a dark background. --compact tightens spacing.

Default footer

<footer class="ln-site-footer">
  <div class="ln-site-footer__inner">
    <div class="ln-site-footer__brand"><strong>Acme Inc.</strong></div>
    <div class="ln-site-footer__columns">
      <div class="ln-site-footer__column">
        <h4 class="ln-site-footer__heading">Product</h4>
        <ul class="ln-site-footer__links">
          <li><a class="ln-site-footer__link" href="#">Features</a></li>
          <li><a class="ln-site-footer__link" href="#">Pricing</a></li>
          <li><a class="ln-site-footer__link" href="#">Changelog</a></li>
        </ul>
      </div>
      <div class="ln-site-footer__column">
        <h4 class="ln-site-footer__heading">Company</h4>
        <ul class="ln-site-footer__links">
          <li><a class="ln-site-footer__link" href="#">About</a></li>
          <li><a class="ln-site-footer__link" href="#">Blog</a></li>
          <li><a class="ln-site-footer__link" href="#">Careers</a></li>
        </ul>
      </div>
      <div class="ln-site-footer__column">
        <h4 class="ln-site-footer__heading">Support</h4>
        <ul class="ln-site-footer__links">
          <li><a class="ln-site-footer__link" href="#">Docs</a></li>
          <li><a class="ln-site-footer__link" href="#">Contact</a></li>
          <li><a class="ln-site-footer__link" href="#">Status</a></li>
        </ul>
      </div>
    </div>
    <div class="ln-site-footer__bottom">
      <span class="ln-site-footer__legal">&copy; 2026 Acme Inc.</span>
    </div>
  </div>
</footer>

Reference

Class	Description	Responsive
`.ln-site-footer`	Footer container	No
`.ln-site-footer__inner`	Centred inner wrapper	No
`.ln-site-footer__brand`	Brand / logo area	No
`.ln-site-footer__columns`	Auto-fit link-column grid	No
`.ln-site-footer__heading`	Column heading	No
`.ln-site-footer__links`	Link list	No
`.ln-site-footer__link`	Individual footer link	No
`.ln-site-footer__social`	Social icon row	No
`.ln-site-footer__bottom`	Bottom bar (legal, secondary links)	No
`.ln-site-footer__legal`	Copyright / legal text	No
`.ln-site-footer--compact`	Reduced column spacing	No
`.ln-site-footer--center`	Centre-aligned layout	No
`.ln-site-footer--inverse`	Dark background variant	No