Website Footers

Terms and conditions, social links? We have a spot for that. Images are in docs/images/general-icons/social-icons/. Zen Test link included for rapid troubleshooting during development. The copyright year updates automatically.

PAGES

LINKS

SUMMARY

Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Minus dolor qui architecto, optio eos, molestias.

Toggle Zen Test

Code Example Shortcut: z-footer-1

<footer class="z-container-fluid square">
  <z-container>
    <z-row class="mobile:two-up">
      <z-col class="text-left">
        <img src="../../docs/images/logo.png" class="w-140" alt="zenCSS logo" />
        <p class="text-xs text-grey-2 ml-1">© <span id="current-year"></span>, your company here</p>
        <img src="../../docs/images/general-icons/social-icons/facebook.png" class="w-20 m-1" alt="Facebook" />
        <img src="../../docs/images/general-icons/social-icons/x-twitter.png" class="w-20 m-1" alt="Twitter" />
        <img src="../../docs/images/general-icons/social-icons/instagram.png" class="w-20 m-1" alt="Instagram" />
      </z-col>
      <z-col class="text-left squeeze">
        <p class="eyebrow">PAGES</p>
        <p><a href="" class="link-reverse text-sm">Red Widgets</a></p>
        <p><a href="" class="link-reverse text-sm">Green Widgets</a></p>
        <p><a href="" class="link-reverse text-sm">Blue Widgets</a></p>
      </z-col>
      <z-col class="text-left squeeze">
        <p class="eyebrow">LINKS</p>
        <p><a href="" class="link-reverse text-sm">Orange Widgets</a></p>
        <p><a href="" class="link-reverse text-sm">Yellow Widgets</a></p>
        <p><a href="" class="link-reverse text-sm">Purple Widgets</a></p>
      </z-col>
      <z-col class="text-left squeeze">
        <p class="eyebrow">SUMMARY</p>
        <p class="text-xs">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. Minus dolor qui architecto, optio eos, molestias.</p>
        <p><a id="toggleButton" class="text-grey-2 text-xs link-reverse">Toggle Zen Test</a></p>
      </z-col>
    </z-row>
  </z-container>
</footer>

Code Example Shortcut: z-footer-2

<footer>
    <div class="social-icons  pb-1">
        <a href="#"> 
            <img src="facebook.png" alt="Facebook">
        </a>
        <a href="#"> 
            <img src="x-twitter.png" alt="Twitter">
        </a>
        <a href="#"> 
            <img src="linkedin.png" alt="LinkedIn">
        </a>
        <a href="#"> 
            <img src="youtube.png" alt="YouTube">
        </a>
        <a href="#"> 
            <img src="discord.png" alt="Discord">
        </a>
        <a href="#"> 
            <img src="instagram.png" alt="Instagram">
        </a>
        <a href="#">
            <img src="tiktok.png" alt="TikTok">
        </a>
    </div>
    <div>
      <small class="smallest">&copy; <span id="current-year"></span>,
       your company here - <a id="toggleButton">Toggle zen test</a></small>
    </div>
</footer>

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.