Sitewide

  <header class="site-header">
    <div class="container">
      <div class="site-header__logo-wrapper">
        <div class="site-header__logo">
          <img src="/img/logo.svg" alt="Virtual College Logo">
        </div>
      </div>
      <button class="site-header__hamburger" data-action="toggle" data-target="#mobile-menu"><i class="material-icons">menu</i></button>
      <nav class="site-header__nav">
        <a class="current" href="#">Courses</a>
        <a href="#">News</a>
        <a href="#">Sectors</a>
        <a href="#">LMS</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#">Case Studies</a>
        <a href="#">Contact</a>
      </nav>
      <nav class="site-header__actions">
        <button data-action="toggle" data-target="#search-overlay"><i class="material-icons">search</i></button>
        <a href="#" class="site-header__login" data-action="toggle" data-target="#login-dialog"><i class="material-icons hidden--phone">person</i> Login</a>
        <a class="site-header__primary-action has-items" href="#"><i class="material-icons hidden--phone">shopping_cart</i> Basket (3)</a>
      </nav>
    </div>
  </header>
  

  <footer class="site-footer">
    <div class="site-footer__top hidden--phablet">
      <div class="container">
        <div class="row">
          <div class="block block--fifth">
            <h4>Contact</h4>
            <address>
              ...
            </address>
          </div>
          <div class="block block--fifth">
            <h4>Links</h4>
            <ul class="list--links">
              <li><a href="...">...</a></li>
              ...
            </ul>
          </div>
          <div class="block block--fifth">
            <h4>Connect</h4>
            <ul class="list--links">
              <li><a href="..."><img src="..." alt="...">...</a></li>
              ....
            </ul>
          </div>
          <div class="block">
            <h4>Success</h4>
            <img src="..." alt="...">
          </div>
        </div>
      </div>
    </div>
    <div class="site-footer__bottom">
      <div class="container">
        <div class="site-footer__copyright">
          <div class="site-footer__logo">
            <img src="/vc-site-patterns/img/logo.svg" alt="Virtual College Logo">
          </div>
          <small>Copyright © 2016 Virtual College</small>
        </div>
        <nav class="site-footer__nav">
          <a href="/privacy-policy">Privacy Policy</a>
          <a href="/terms-and-conditions">Terms &amp; Conditions</a>
          <a href="/sitemap">Sitemap</a>
        </nav>
      </div>
    </div>
  </footer>
  

  <div class="site-wrapper">
    ...
  </div>