UI components

Footers

Footers serve site visitors who arrive at the bottom of a page without finding what they want.

Footer links should point to popular content that might answer a visitor’s remaining questions.
Link grouping in the footer does not have to mirror link grouping in top level header navigation (especially if the navigation offers many more links than the footer can).
Link only to social media your agency updates frequently or uses to communicate with customers.
Important contact information should be limited to general email or phone numbers, which should be clickable links to dial from a mobile phone. Physical addresses should live on contact pages users can navigate to from the accordion links.

Code

<h6 class="oit-heading-alt" id="big-footer">Big footer</h6>
<footer class="oit-footer" role="contentinfo">
 <div class="oit-footer-container">
  <nav class="oit-footer-nav">
   <ul>
     <li class="oit-footer-main-link">
      <a href="http://oit.state.co.us/accessibility" target="_blank">Accessibility</a>
     </li>
     <li class="oit-footer-main-link">
      <a href="https://www.colorado.gov/privacy-statement" target="_blank">Privacy Statement</a>
     </li>
     <li class="oit-footer-main-link">
      <a href="https://www.colorado.gov/security-statement" target="_blank">Security Statement</a>
     </li>
    </ul>
  </nav>
  <div class="oit-footer-logo">
   <a href="https://www.colorado.gov" class="oit-footer-logo--image" target="_blank">
    <img src="./img/co_state_web_portal_gray.svg" alt="Colorado.gov The Official State Web Portal">
   </a>
   <div class="oit-footer-copy">© 2018 State of Colorado</div>
  </div>
 </div>
</footer>