The Ounce › Style Guide


Site Footer


The footer navigation promotes the Ounce's network of sites (these link off-site) and a handful of social media accounts. The organizational navigation is completely exposed, and arranged in an easy to parse grid of links.

<footer class="footer">
  <div class="container">

    <nav class="footer-nav">
      <div class="l-4up-1 global-nav">
        <ul>
          <li><a class="level-1" href="#">Who We Are<i class="ss-icon left">navigateright</i></a>
            <ul>
              <li><a href="#">Leadership Staff</a></li>
              <li><a href="#">Board of Directors</a></li>
              <li><a href="#">Partners</a></li>
              <li><a href="#">Careers</a></li>  
              <li><a href="#">Contact Us</a></li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="l-4up-2 global-nav">
        <ul>
          <li><a class="level-1" href="#">What We Do<i class="ss-icon left">navigateright</i></a>
            <ul>
              <li><a href="#">Initiatives</a></li>
              <li><a href="#">Research</a></li>
              <li><a href="#">Professional Development</a></li>  
              <li><a href="#">Policy/Advocacy</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><a class="level-1" href="#">News<i class="ss-icon left">navigateright</i></a>
            <ul>
              <li><a href="#">Press Releases</a></li>
              <li><a href="#">Early Education News</a></li>
              <li><a href="#">Ounce in the News</a></li>
            </ul>
          </li>
        </ul> 
      </div>

      <div class="l-4up-3 global-nav">
        <ul>
          <li><a class="level-1" href="#">Resources<i class="ss-icon left">navigateright</i></a>
            <ul>
              <li><a href="#">Publications</a></li>
              <li><a href="#">Early Education Newsletter</a></li>
              <li><a href="#">Videos</a></li>  
              <li><a href="#">Advocacy Tools</a></li>  
              <li><a href="#">Parent Tools</a></li>
            </ul>
          </li>
        </ul>            
        <ul>
          <li><a class="level-1" href="#">Blog<i class="ss-icon left">navigateright</i></a>
            <ul>
              <li><a href="#">Archive</a></li>
            </ul>
          </li>
        </ul> 
      </div>

      <div class="l-4up-4 network-nav">
        <ul>
          <li class="level-1 ounce-network-title">The Ounce Network:</li>
          <li><a href="#"><i class="ss-icon network-icon">world</i>Educare Schools</a></li>
          <li><a href="#"><i class="ss-icon network-icon">world</i>First Five Years Fund</a></li>
          <li><a href="#"><i class="ss-icon network-icon">world</i>DHS Training</a></li>
          <li><a href="#"><i class="ss-icon network-icon">world</i>Prevention Initiative Training</a></li>
          <li><a href="#"><i class="ss-icon network-icon">world</i>Open Training</a></li> 
        </ul>
      </div>

    </nav>                        
  </div>

  <div class="container">
    <div class="l-2up-1">
      <img class="footer-logo" src="/ounce/assets/img/global/ounce-logo-header.svg"/>
    </div>

    <div class="l-2up-2">
      <nav class="social-nav">
        <a href="#"><i class="ss-icon ss-social-circle">facebook</i></a>
        <a href="#"><i class="ss-icon ss-social-circle">twitter</i></a>
        <a href="#"><i class="ss-icon ss-social-circle">googleplus</i></a>
        <a href="#"><i class="ss-icon ss-social-circle">youtube</i></a>
        <a href="#"><i class="ss-icon ss-social-circle">pinterest</i></a>
      </nav>
    </div>
   

    <div class="l-1up">  
      <p class="footer-copyright">33 West Monroe Street, Suite 2400, Chicago, IL 60603  ·  312.922.3863  ·  <a href="#">Privacy Policy</a>  ·  ©2013 Ounce of Prevention Fund</p>
    </div>
  </div>
<footer>