Footer

Site footer with brand, navigation links, text, and layout variants. Automatically pushed to the bottom of the page.

Default Footer

Default footer

<footer class="ug-footer" style="position:relative">
  <div class="ug-footer__inner">
    <div class="ug-footer__brand">SiteName</div>
    <nav class="ug-footer__nav">
      <a class="ug-footer__link" href="#">About</a>
      <a class="ug-footer__link" href="#">Privacy</a>
      <a class="ug-footer__link" href="#">Terms</a>
      <a class="ug-footer__link" href="#">Contact</a>
    </nav>
    <p class="ug-footer__text">Copyright 2026. All rights reserved.</p>
  </div>
</footer>

Compact Footer

Compact variant

<footer class="ug-footer ug-footer--compact" style="position:relative">
  <div class="ug-footer__inner">
    <div class="ug-footer__brand">SiteName</div>
    <nav class="ug-footer__nav">
      <a class="ug-footer__link" href="#">Privacy</a>
      <a class="ug-footer__link" href="#">Terms</a>
    </nav>
  </div>
</footer>

Light Footer

Light variant

<footer class="ug-footer ug-footer--light" style="position:relative">
  <div class="ug-footer__inner">
    <div class="ug-footer__brand">SiteName</div>
    <nav class="ug-footer__nav">
      <a class="ug-footer__link" href="#">About</a>
      <a class="ug-footer__link" href="#">Privacy</a>
      <a class="ug-footer__link" href="#">Terms</a>
    </nav>
    <p class="ug-footer__text">A lighter footer for light-themed pages.</p>
  </div>
</footer>

Footer with Divider

With divider

<footer class="ug-footer" style="position:relative">
  <div class="ug-footer__inner">
    <div class="ug-footer__brand">SiteName</div>
    <hr class="ug-footer__divider" />
    <nav class="ug-footer__nav">
      <a class="ug-footer__link" href="#">About</a>
      <a class="ug-footer__link" href="#">Privacy</a>
      <a class="ug-footer__link" href="#">Terms</a>
    </nav>
    <p class="ug-footer__text">Copyright 2026.</p>
  </div>
</footer>

Class Reference

Class	Description
`.ug-footer`	Footer container (dark background, white text)
`.ug-footer__inner`	Inner wrapper for content alignment
`.ug-footer__brand`	Brand/logo text or image
`.ug-footer__nav`	Navigation link container
`.ug-footer__link`	Footer navigation link
`.ug-footer__text`	Footer body text (e.g. copyright)
`.ug-footer__divider`	Horizontal rule divider
`.ug-footer--compact`	Reduced padding, inline layout
`.ug-footer--light`	Light background, dark text