Site Footer

A site footer is a consistent base to a website that provides useful, global information no matter what page you are on.

Department Example

This is an example footer for a department within a faculty

<footer id="site-footer" class="grey py-4">
    <div class="container">
      <div class="row row-eq-height">
        <div class="col-xl-3 col-lg-12 col-md-6 text-center text-xl-right">
          <h2 id="site-name" class="mr-xl-4"><a href="" class="tier1 upperlower0">Faculty</a>
            <a href="" class="tier2">Department</a></h2>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 text-center text-xl-left">
          <h3>Location Details</h3>
          <a href=""><address>1280 Main St. West<br>
                      John Hodgings Engineering<br>
                      Building Room A315<br>
                      Hamilton, ON &nbsp;L8S&nbsp;4L7</address></a>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 text-center text-xl-left">
          <h3>Office Hours</h3>
          <p>Monday - Friday<br>8:30am to 4:30am</p>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 text-center text-xl-left">
          <h3>Contact Information</h3>
          <p>Phone: <a href="tel:+19055259140p22222">905 525-9140 Ext. 22222</a><br> Email: <a href="mailto:name@mcmaster.ca">name@mcmaster.ca</a></p>
          <div class="ss-icon-menu">
            <a class="ss-icons ss-instagram" href="#"><span class="sr-only">Instagram</span></a>
            <a class="ss-icons ss-twitter" href="#"><span class="sr-only">Twitter</span></a>
            <a class="ss-icons ss-facebook" href="#"><span class="sr-only">Facebook</span></a>
            <!-- <a class="ss-icons ss-youtube" href="#"><span class="sr-only">YouTube</span></a>
            <a class="ss-icons ss-google-plus" href="#"><span class="sr-only">Google Plus</span></a>
            <a class="ss-icons ss-linkedin" href="#"><span class="sr-only">LinkedIn</span></a> -->
          </div>
        </div>
      </div>
    </div>
  </footer>

Generic Footer Example

This is an example footer for a generic site.  The site name now has an upper and lower case title with no parent faculty.

<footer id="site-footer" class="grey py-4">
    <div class="container">
      <div class="row row-eq-height">
        <div class="col-xl-3 col-lg-12 col-md-6 text-center text-xl-right">
          <h2 id="site-name" class="mr-xl-4"><a href="" class="tier1 upperlower">Site Name</a></h2>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 text-center text-xl-left">
          <h3>Location Details</h3>
          <a href=""><address>1280 Main St. West<br>
                      John Hodgings Engineering<br>
                      Building Room A315<br>
                      Hamilton, ON &nbsp;L8S&nbsp;4L7</address></a>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 text-center text-xl-left">
          <h3>Office Hours</h3>
          <p>Monday - Friday<br>8:30am to 4:30am</p>
        </div>
        <div class="col-xl-3 col-lg-4 col-md-6 text-center text-xl-left">
          <h3>Contact Information</h3>
          <p>Phone: <a href="tel:+19055259140p22222">905 525-9140 Ext. 22222</a><br> Email: <a href="mailto:name@mcmaster.ca">name@mcmaster.ca</a></p>
          <div class="ss-icon-menu">
            <!-- <a class="ss-icons ss-instagram" href="#"><span class="sr-only">Instagram</span></a>
            <a class="ss-icons ss-twitter" href="#"><span class="sr-only">Twitter</span></a>
            <a class="ss-icons ss-facebook" href="#"><span class="sr-only">Facebook</span></a> -->
            <a class="ss-icons ss-youtube" href="#"><span class="sr-only">YouTube</span></a>
            <a class="ss-icons ss-google-plus" href="#"><span class="sr-only">Google Plus</span></a>
            <a class="ss-icons ss-linkedin" href="#"><span class="sr-only">LinkedIn</span></a>
          </div>
        </div>
      </div>
    </div>
  </footer>