Site Footer

Site footers provide a region at the bottom of the page for relevant links and contact info related to the website or application.

Examples and Code

Select exampleDefault

Open Full Example

<div class="site-footer">
  <div class="site-footer__container" style="max-width: px;">
    <div class="site-footer__custom-content">
      Here is some footer info
    </div>
    <div class="site-footer__contact-info-container">
      <div class="site-footer__contact-info">
        <div itemscope="" itemtype="http://schema.org/Organization">
          <h3 class="site-footer__parent-org"><a href="https://communications.uoregon.edu">University Communications</a></h3>
          <span itemprop="name"><strong>Digital Strategy</strong></span><br>
          <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
            <div itemprop="streetAddress">1239 University of Oregon</div>
              <span itemprop="addressLocality">Eugene</span>, <span itemprop="addressRegion">OR </span> <span itemprop="postalCode">97403-1239</span>
            <div class="site-footer__phone-fax">P: <span itemprop="telephone">541-346-3134</span></div>
          </div>
          <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"></div>
          <div itemprop="email"><a href="mailto:webservices@uoregon.edu">webservices@uoregon.edu</a></div>
          <ul class="site-footer__social-links">
            <li itemprop="sameAs">
              <a href="https://www.facebook.com/universityoforegon" aria-label="Visit us on Facebook">
                <i class="fab fa-facebook-f" aria-hidden="true"></i>
              </a>
            </li>
          </ul>
          <link itemprop="url" style="visibility:hidden;" itemscope="//digital.uoregon.edu">
        </div>
      </div>
    </div>
  </div>
</div>

Guidance

Usage Guidance

• Include utility links and contact info in the footer
• Don’t put non-logo images in footers

Elements

Element	Description	Usage	Required	Multiple
Contact Info	Contact info for the site	Use on unit websites	No	No
Social Media links	Social media link icons	Promote social media presence for a unit	No	No