Skip to main content
Rivet Design System Indiana University

Footer

Add an IU-branded footer to your website or application

Overview #

A footer is a section at the bottom of each page that contains contact, privacy, accessibility, and copyright information. Footers also often include links to useful resources and social media buttons.

Examples #

The examples on this page are best viewed in a new window.


Open in new window
Copy link to example 
<footer class="rvt-footer-base">
  <div class="rvt-container-lg">
    <div class="rvt-footer-base__inner">
      <!-- IU trident -->
      <div class="rvt-footer-base__logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <polygon fill="currentColor" points="15.3 3.19 15.3 5 16.55 5 16.55 15.07 13.9 15.07 13.9 1.81 15.31 1.81 15.31 0 8.72 0 8.72 1.81 10.12 1.81 10.12 15.07 7.45 15.07 7.45 5 8.7 5 8.7 3.19 2.5 3.19 2.5 5 3.9 5 3.9 16.66 6.18 18.98 10.12 18.98 10.12 21.67 8.72 21.67 8.72 24 15.3 24 15.3 21.67 13.9 21.67 13.9 18.98 17.82 18.98 20.09 16.66 20.09 5 21.5 5 21.5 3.19 15.3 3.19" fill="#231f20"/>
        </svg>
      </div>
      <!-- List of links -->
      <ul class="rvt-footer-base__list">
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://accessibility.iu.edu/assistance/">Accessibility</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="#">Privacy Notice</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://www.iu.edu/copyright/index.html">Copyright</a> © 2024 The Trustees of <a class="rvt-footer-base__link" href="https://www.iu.edu">Indiana University</a>
        </li>
      </ul>
    </div>
  </div>
</footer>
Open in new window
Copy link to example 
<footer class="rvt-footer-base rvt-footer-base--light">
  <div class="rvt-container-lg">
    <div class="rvt-footer-base__inner">
      <!-- IU trident -->
      <div class="rvt-footer-base__logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <polygon fill="currentColor" points="15.3 3.19 15.3 5 16.55 5 16.55 15.07 13.9 15.07 13.9 1.81 15.31 1.81 15.31 0 8.72 0 8.72 1.81 10.12 1.81 10.12 15.07 7.45 15.07 7.45 5 8.7 5 8.7 3.19 2.5 3.19 2.5 5 3.9 5 3.9 16.66 6.18 18.98 10.12 18.98 10.12 21.67 8.72 21.67 8.72 24 15.3 24 15.3 21.67 13.9 21.67 13.9 18.98 17.82 18.98 20.09 16.66 20.09 5 21.5 5 21.5 3.19 15.3 3.19" fill="#231f20"/>
        </svg>
      </div>
      <!-- List of links -->
      <ul class="rvt-footer-base__list">
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://accessibility.iu.edu/assistance/">Accessibility</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="#">Privacy Notice</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://www.iu.edu/copyright/index.html">Copyright</a> © 2024 The Trustees of <a class="rvt-footer-base__link" href="https://www.iu.edu">Indiana University</a>
        </li>
      </ul>
    </div>
  </div>
</footer>
Open in new window
Copy link to example 
<!-- Footer resources module -->
<div aria-labelledby="resources-heading" class="rvt-footer-resources" role="complementary">
  <!-- Heading for people using screen readers -->
  <h2 class="rvt-sr-only" id="resources-heading">Additional resources</h2>
  <div class="rvt-container-lg">
    <div class="rvt-row">
      <!-- Address -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Indiana University</h3>
        <div class="rvt-footer-resources__text-block">
          107 S. Indiana Avenue<br />
          Bloomington, IN<br />
          47405-7000
        </div>
      </div>
      <!-- Categorized list of resource links -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Services</h3>
        <ul class="rvt-footer-resources__list">
          <li class="rvt-footer-resources__list-item">
            <a href="https://canvas.iu.edu">Canvas</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://one.iu.edu">One.IU</a>
          </li>
        </ul>
      </div>
      <!-- Categorized list of resource links -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Email</h3>
        <ul class="rvt-footer-resources__list">
          <li class="rvt-footer-resources__list-item">
            <a href="https://uits.iu.edu/exchange">Outlook Web Access</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://google.iu.edu">Gmail at IU</a>
          </li>
        </ul>
      </div>
      <!-- Categorized list of resource links -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Find</h3>
        <ul class="rvt-footer-resources__list">
          <li class="rvt-footer-resources__list-item">
            <a href="https://directory.iu.edu/">People Directory</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://jobs.iu.edu/">Jobs at IU</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://www.iu.edu/nondiscrimination/index.html">Non-discrimination Notice</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- Base footer -->
<footer class="rvt-footer-base">
  <div class="rvt-container-lg">
    <div class="rvt-footer-base__inner">
      <!-- IU trident -->
      <div class="rvt-footer-base__logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <polygon fill="currentColor" points="15.3 3.19 15.3 5 16.55 5 16.55 15.07 13.9 15.07 13.9 1.81 15.31 1.81 15.31 0 8.72 0 8.72 1.81 10.12 1.81 10.12 15.07 7.45 15.07 7.45 5 8.7 5 8.7 3.19 2.5 3.19 2.5 5 3.9 5 3.9 16.66 6.18 18.98 10.12 18.98 10.12 21.67 8.72 21.67 8.72 24 15.3 24 15.3 21.67 13.9 21.67 13.9 18.98 17.82 18.98 20.09 16.66 20.09 5 21.5 5 21.5 3.19 15.3 3.19" fill="#231f20"/>
        </svg>
      </div>
      <!-- List of links -->
      <ul class="rvt-footer-base__list">
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://accessibility.iu.edu/assistance/">Accessibility</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="#">Privacy Notice</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://www.iu.edu/copyright/index.html">Copyright</a> © 2024 The Trustees of <a class="rvt-footer-base__link" href="https://www.iu.edu">Indiana University</a>
        </li>
      </ul>
    </div>
  </div>
</footer>
Open in new window
Copy link to example 
<div aria-labelledby="social-heading" class="rvt-footer-social" role="complementary">
  <div class="rvt-container-lg">
    <!-- Heading for people using screen readers -->
    <h2 class="rvt-sr-only" id="social-heading">Social media</h2>
    <ul class="rvt-footer-social__list">
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.facebook.com/IndianaUniversity">
          <span class="rvt-sr-only rvt-color-white">Facebook for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"></path>
            <path d="M24.8996 9.99982V13.1998H23.0996C23.0996 13.1998 21.4996 12.9998 21.4996 14.4998V16.9998H24.7996L24.3996 20.3998H21.4996V29.9998H17.6996V20.2998H15.0996V16.9998H17.7996V14.0998C17.7996 14.0998 17.4996 12.4998 18.8996 11.1998C20.2996 9.89982 22.1996 9.99982 22.1996 9.99982H24.8996Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.linkedin.com/company/indiana-university/">
          <span class="rvt-sr-only rvt-color-white">Linkedin for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"></path>
            <path d="M11.3 16H15V28H11.3V16ZM13.2 10C14.4 10 15.4 11 15.4 12.2C15.4 13.4 14.4 14.4 13.2 14.4C12 14.4 11 13.4 11 12.2C11 11 12 10 13.2 10Z" fill="#F7F7F8"></path>
            <path d="M17.3999 16.0002H20.9999V17.6002C21.4999 16.7002 22.6999 15.7002 24.4999 15.7002C28.2999 15.7002 28.9999 18.2002 28.9999 21.4002V28.0002H25.2999V22.2002C25.2999 20.8002 25.2999 19.0002 23.3999 19.0002C21.4999 19.0002 21.1999 20.5002 21.1999 22.1002V28.0002H17.4999V16.0002H17.3999Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://twitter.com/IndianaUniv">
          <span class="rvt-sr-only rvt-color-white">Twitter for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="40" height="40" viewBox="0 0 40 40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"/>
            <path d="M25.7508 11H28.8175L22.1175 18.6255L30 29H23.8283L18.995 22.7071L13.4633 29H10.395L17.5617 20.8435L10 11.0008H16.3283L20.6975 16.7527L25.7508 11ZM24.675 27.1729H26.3742L15.405 12.7317H13.5817L24.675 27.1729Z" fill="#F7F7F8"/>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.instagram.com/iubloomington/">
          <span class="rvt-sr-only rvt-color-white">Instagram for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"></path>
            <path d="M24.3004 29.9999H15.6004C12.5004 29.9999 9.90039 27.4999 9.90039 24.2999V15.5999C9.90039 12.4999 12.4004 9.8999 15.6004 9.8999H24.3004C27.4004 9.8999 30.0004 12.3999 30.0004 15.5999V24.2999C30.0004 27.4999 27.5004 29.9999 24.3004 29.9999ZM24.3004 28.4999C25.4004 28.4999 26.5004 28.0999 27.2004 27.2999C27.9004 26.4999 28.4004 25.4999 28.4004 24.3999V15.6999C28.4004 14.5999 28.0004 13.4999 27.2004 12.7999C26.4004 11.9999 25.4004 11.5999 24.3004 11.5999H15.6004C14.5004 11.5999 13.4004 11.9999 12.7004 12.7999C11.9004 13.5999 11.5004 14.5999 11.5004 15.6999V24.3999C11.5004 25.4999 11.9004 26.5999 12.7004 27.2999C13.5004 27.9999 14.5004 28.4999 15.6004 28.4999H24.3004Z" fill="#F7F7F8"></path>
            <path d="M25.4006 19.9C25.4006 22.9 23.0006 25.3 20.0006 25.3C17.0006 25.3 14.6006 22.9 14.6006 19.9C14.6006 16.9 17.0006 14.5 20.0006 14.5C23.0006 14.5 25.4006 17 25.4006 19.9ZM20.0006 16.4C18.1006 16.4 16.5006 18 16.5006 19.9C16.5006 21.8 18.1006 23.4 20.0006 23.4C21.9006 23.4 23.5006 21.8 23.5006 19.9C23.5006 18 21.9006 16.4 20.0006 16.4Z" fill="#F7F7F8"></path>
            <path d="M25.5002 15.8002C26.2182 15.8002 26.8002 15.2182 26.8002 14.5002C26.8002 13.7822 26.2182 13.2002 25.5002 13.2002C24.7822 13.2002 24.2002 13.7822 24.2002 14.5002C24.2002 15.2182 24.7822 15.8002 25.5002 15.8002Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.youtube.com/user/iu">
          <span class="rvt-sr-only rvt-color-white">Youtube for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20,40A20,20,0,1,0,0,20,20,20,0,0,0,20,40Z" fill="#7A1705"></path>
            <path d="M29.58,15.17a2.49,2.49,0,0,0-1.77-1.78C26.25,13,20,13,20,13s-6.25,0-7.81.42a2.49,2.49,0,0,0-1.77,1.78A26.26,26.26,0,0,0,10,20a26.23,26.23,0,0,0,.42,4.84,2.47,2.47,0,0,0,1.77,1.75C13.75,27,20,27,20,27s6.25,0,7.81-.42a2.47,2.47,0,0,0,1.77-1.75A26.23,26.23,0,0,0,30,20,26.26,26.26,0,0,0,29.58,15.17ZM18,23V17l5.23,3Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
    </ul>
  </div>
</div>
<!-- Base footer -->
<footer class="rvt-footer-base">
  <div class="rvt-container-lg">
    <div class="rvt-footer-base__inner">
      <!-- IU trident -->
      <div class="rvt-footer-base__logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <polygon fill="currentColor" points="15.3 3.19 15.3 5 16.55 5 16.55 15.07 13.9 15.07 13.9 1.81 15.31 1.81 15.31 0 8.72 0 8.72 1.81 10.12 1.81 10.12 15.07 7.45 15.07 7.45 5 8.7 5 8.7 3.19 2.5 3.19 2.5 5 3.9 5 3.9 16.66 6.18 18.98 10.12 18.98 10.12 21.67 8.72 21.67 8.72 24 15.3 24 15.3 21.67 13.9 21.67 13.9 18.98 17.82 18.98 20.09 16.66 20.09 5 21.5 5 21.5 3.19 15.3 3.19" fill="#231f20"/>
        </svg>
      </div>
      <!-- List of links -->
      <ul class="rvt-footer-base__list">
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://accessibility.iu.edu/assistance/">Accessibility</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="#">Privacy Notice</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://www.iu.edu/copyright/index.html">Copyright</a> © 2024 The Trustees of <a class="rvt-footer-base__link" href="https://www.iu.edu">Indiana University</a>
        </li>
      </ul>
    </div>
  </div>
</footer>
Open in new window
Copy link to example 
<!-- Footer social module -->
<div aria-labelledby="social-heading" class="rvt-footer-social" role="complementary">
  <div class="rvt-container-lg">
    <!-- Heading for people using screen readers -->
    <h2 class="rvt-sr-only" id="social-heading">Social media</h2>
    <ul class="rvt-footer-social__list">
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.facebook.com/IndianaUniversity">
          <span class="rvt-sr-only rvt-color-white">Facebook for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"></path>
            <path d="M24.8996 9.99982V13.1998H23.0996C23.0996 13.1998 21.4996 12.9998 21.4996 14.4998V16.9998H24.7996L24.3996 20.3998H21.4996V29.9998H17.6996V20.2998H15.0996V16.9998H17.7996V14.0998C17.7996 14.0998 17.4996 12.4998 18.8996 11.1998C20.2996 9.89982 22.1996 9.99982 22.1996 9.99982H24.8996Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.linkedin.com/company/indiana-university/">
          <span class="rvt-sr-only rvt-color-white">Linkedin for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"></path>
            <path d="M11.3 16H15V28H11.3V16ZM13.2 10C14.4 10 15.4 11 15.4 12.2C15.4 13.4 14.4 14.4 13.2 14.4C12 14.4 11 13.4 11 12.2C11 11 12 10 13.2 10Z" fill="#F7F7F8"></path>
            <path d="M17.3999 16.0002H20.9999V17.6002C21.4999 16.7002 22.6999 15.7002 24.4999 15.7002C28.2999 15.7002 28.9999 18.2002 28.9999 21.4002V28.0002H25.2999V22.2002C25.2999 20.8002 25.2999 19.0002 23.3999 19.0002C21.4999 19.0002 21.1999 20.5002 21.1999 22.1002V28.0002H17.4999V16.0002H17.3999Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://twitter.com/IndianaUniv">
          <span class="rvt-sr-only rvt-color-white">Twitter for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="40" height="40" viewBox="0 0 40 40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"/>
            <path d="M25.7508 11H28.8175L22.1175 18.6255L30 29H23.8283L18.995 22.7071L13.4633 29H10.395L17.5617 20.8435L10 11.0008H16.3283L20.6975 16.7527L25.7508 11ZM24.675 27.1729H26.3742L15.405 12.7317H13.5817L24.675 27.1729Z" fill="#F7F7F8"/>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.instagram.com/iubloomington/">
          <span class="rvt-sr-only rvt-color-white">Instagram for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20 40C31.0457 40 40 31.0457 40 20C40 8.9543 31.0457 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40Z" fill="#7A1705"></path>
            <path d="M24.3004 29.9999H15.6004C12.5004 29.9999 9.90039 27.4999 9.90039 24.2999V15.5999C9.90039 12.4999 12.4004 9.8999 15.6004 9.8999H24.3004C27.4004 9.8999 30.0004 12.3999 30.0004 15.5999V24.2999C30.0004 27.4999 27.5004 29.9999 24.3004 29.9999ZM24.3004 28.4999C25.4004 28.4999 26.5004 28.0999 27.2004 27.2999C27.9004 26.4999 28.4004 25.4999 28.4004 24.3999V15.6999C28.4004 14.5999 28.0004 13.4999 27.2004 12.7999C26.4004 11.9999 25.4004 11.5999 24.3004 11.5999H15.6004C14.5004 11.5999 13.4004 11.9999 12.7004 12.7999C11.9004 13.5999 11.5004 14.5999 11.5004 15.6999V24.3999C11.5004 25.4999 11.9004 26.5999 12.7004 27.2999C13.5004 27.9999 14.5004 28.4999 15.6004 28.4999H24.3004Z" fill="#F7F7F8"></path>
            <path d="M25.4006 19.9C25.4006 22.9 23.0006 25.3 20.0006 25.3C17.0006 25.3 14.6006 22.9 14.6006 19.9C14.6006 16.9 17.0006 14.5 20.0006 14.5C23.0006 14.5 25.4006 17 25.4006 19.9ZM20.0006 16.4C18.1006 16.4 16.5006 18 16.5006 19.9C16.5006 21.8 18.1006 23.4 20.0006 23.4C21.9006 23.4 23.5006 21.8 23.5006 19.9C23.5006 18 21.9006 16.4 20.0006 16.4Z" fill="#F7F7F8"></path>
            <path d="M25.5002 15.8002C26.2182 15.8002 26.8002 15.2182 26.8002 14.5002C26.8002 13.7822 26.2182 13.2002 25.5002 13.2002C24.7822 13.2002 24.2002 13.7822 24.2002 14.5002C24.2002 15.2182 24.7822 15.8002 25.5002 15.8002Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
      <!-- Linked social media icon -->
      <li>
        <a href="https://www.youtube.com/user/iu">
          <span class="rvt-sr-only rvt-color-white">Youtube for IU</span>
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" height="40" viewBox="0 0 40 40" width="40">
            <path d="M20,40A20,20,0,1,0,0,20,20,20,0,0,0,20,40Z" fill="#7A1705"></path>
            <path d="M29.58,15.17a2.49,2.49,0,0,0-1.77-1.78C26.25,13,20,13,20,13s-6.25,0-7.81.42a2.49,2.49,0,0,0-1.77,1.78A26.26,26.26,0,0,0,10,20a26.23,26.23,0,0,0,.42,4.84,2.47,2.47,0,0,0,1.77,1.75C13.75,27,20,27,20,27s6.25,0,7.81-.42a2.47,2.47,0,0,0,1.77-1.75A26.23,26.23,0,0,0,30,20,26.26,26.26,0,0,0,29.58,15.17ZM18,23V17l5.23,3Z" fill="#F7F7F8"></path>
          </svg>
        </a>
      </li>
    </ul>
  </div>
</div>
<!-- Footer resources module -->
<div aria-labelledby="resources-heading" class="rvt-footer-resources" role="complementary">
  <!-- Heading for people using screen readers -->
  <h2 class="rvt-sr-only" id="resources-heading">Additional resources</h2>
  <div class="rvt-container-lg">
    <div class="rvt-row">
      <!-- Address -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Indiana University</h3>
        <div class="rvt-footer-resources__text-block">
          107 S. Indiana Avenue<br />
          Bloomington, IN<br />
          47405-7000
        </div>
      </div>
      <!-- Categorized list of resource links -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Services</h3>
        <ul class="rvt-footer-resources__list">
          <li class="rvt-footer-resources__list-item">
            <a href="https://canvas.iu.edu">Canvas</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://one.iu.edu">One.IU</a>
          </li>
        </ul>
      </div>
      <!-- Categorized list of resource links -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Email</h3>
        <ul class="rvt-footer-resources__list">
          <li class="rvt-footer-resources__list-item">
            <a href="https://uits.iu.edu/exchange">Outlook Web Access</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://google.iu.edu">Gmail at IU</a>
          </li>
        </ul>
      </div>
      <!-- Categorized list of resource links -->
      <div class="rvt-cols-3-md">
        <h3 class="rvt-footer-resources__heading">Find</h3>
        <ul class="rvt-footer-resources__list">
          <li class="rvt-footer-resources__list-item">
            <a href="https://directory.iu.edu/">People Directory</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://jobs.iu.edu/">Jobs at IU</a>
          </li>
          <li class="rvt-footer-resources__list-item">
            <a href="https://www.iu.edu/nondiscrimination/index.html">Non-discrimination Notice</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- Base footer -->
<footer class="rvt-footer-base">
  <div class="rvt-container-lg">
    <div class="rvt-footer-base__inner">
      <!-- IU trident -->
      <div class="rvt-footer-base__logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <polygon fill="currentColor" points="15.3 3.19 15.3 5 16.55 5 16.55 15.07 13.9 15.07 13.9 1.81 15.31 1.81 15.31 0 8.72 0 8.72 1.81 10.12 1.81 10.12 15.07 7.45 15.07 7.45 5 8.7 5 8.7 3.19 2.5 3.19 2.5 5 3.9 5 3.9 16.66 6.18 18.98 10.12 18.98 10.12 21.67 8.72 21.67 8.72 24 15.3 24 15.3 21.67 13.9 21.67 13.9 18.98 17.82 18.98 20.09 16.66 20.09 5 21.5 5 21.5 3.19 15.3 3.19" fill="#231f20"/>
        </svg>
      </div>
      <!-- List of links -->
      <ul class="rvt-footer-base__list">
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://accessibility.iu.edu/assistance/">Accessibility</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="#">Privacy Notice</a>
        </li>
        <li class="rvt-footer-base__item">
          <a class="rvt-footer-base__link" href="https://www.iu.edu/copyright/index.html">Copyright</a> © 2024 The Trustees of <a class="rvt-footer-base__link" href="https://www.iu.edu">Indiana University</a>
        </li>
      </ul>
    </div>
  </div>
</footer>

Usage #

  • Resource link and social media modules are optional. Only the base footer is required.
  • Resource link and social media modules must appear before base footer. If you are using the resource link or social media modules, they must appear before the base footer in your markup. If you are using both the resource link and social media modules, the social media module should appear first. See the code examples on this page for guidance.
  • Use the grid to create columns of resource links. You can use the grid to adjust the number and width of columns in the resource link module, provided the total column width does not exceed 12. See the code examples on this page for guidance.
  • Use SVG for social media icons. The code examples on this page include icons for five common social media platforms. If you need an icon for a platform not shown, use an SVG icon that is scaled to 40×40 pixels.

Do

  • Use a footer on every page of your website or web application
  • Use to present helpful links related to your site's content
  • Use to promote your unit's social media accounts

Don't

  • Alter the IU trident logo or copyright text (other than the year)
  • Put the base footer before the resource link or social media modules

Accessibility #

  • The resource link module, social media module, and base footer must be siblings of the main element. Do not put the resource link or social media modules within the footer element.