Description

The Stanford global footer is one of three key elements in the Stanford Identity system for the web, and is an important element in directing your website users to important University-wide webpages.

Learn more about aligning your site with the Stanford Identity

Default Style

Example Markup

<div class="su-global-footer [ modifier_class ]">
  <div class="su-global-footer__container" title="Common Stanford resources">
    <div class="su-global-footer__brand">
      <a class="su-logo [ modifier_class ]" href="https://www.stanford.edu">
        Stanford
        <br />
        University
      </a>
    </div>
    <div class="su-global-footer__content">
      <nav aria-label="global footer menu">
        <ul class="su-global-footer__menu su-global-footer__menu--global">
          <li>
            <a href="https://www.stanford.edu">
              Stanford Home
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://visit.stanford.edu/plan/">
              Maps &amp; Directions
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/search/">
              Search Stanford
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://emergency.stanford.edu">
              Emergency Info
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
        </ul>
        <ul class="su-global-footer__menu su-global-footer__menu--policy">
          <li>
            <a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">
              Terms of Use
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">
              Privacy
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://uit.stanford.edu/security/copyright-infringement" title="Report alleged copyright infringement">
              Copyright
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4" title="Ownership and use of Stanford trademarks and images">
              Trademarks
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://studentservices.stanford.edu/more-resources/student-policies/non-academic/non-discrimination" title="Non-discrimination policy">
              Non-Discrimination
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">
              Accessibility
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
        </ul>
      </nav>
      <div class="su-global-footer__copyright">
        <span>&copy; Stanford University.</span>
        <span>&nbsp; Stanford, California 94305.</span>
      </div>
    </div>
  </div>
</div>

Style Variants

.su-global-footer--bright

Global Footer with bright red background color.

Example Markup

<div class="su-global-footer su-global-footer--bright">
  <div class="su-global-footer__container" title="Common Stanford resources">
    <div class="su-global-footer__brand">
      <a class="su-logo su-global-footer--bright" href="https://www.stanford.edu">
        Stanford
        <br />
        University
      </a>
    </div>
    <div class="su-global-footer__content">
      <nav aria-label="global footer menu">
        <ul class="su-global-footer__menu su-global-footer__menu--global">
          <li>
            <a href="https://www.stanford.edu">
              Stanford Home
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://visit.stanford.edu/plan/">
              Maps &amp; Directions
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/search/">
              Search Stanford
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://emergency.stanford.edu">
              Emergency Info
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
        </ul>
        <ul class="su-global-footer__menu su-global-footer__menu--policy">
          <li>
            <a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">
              Terms of Use
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">
              Privacy
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://uit.stanford.edu/security/copyright-infringement" title="Report alleged copyright infringement">
              Copyright
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4" title="Ownership and use of Stanford trademarks and images">
              Trademarks
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://studentservices.stanford.edu/more-resources/student-policies/non-academic/non-discrimination" title="Non-discrimination policy">
              Non-Discrimination
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">
              Accessibility
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
        </ul>
      </nav>
      <div class="su-global-footer__copyright">
        <span>&copy; Stanford University.</span>
        <span>&nbsp; Stanford, California 94305.</span>
      </div>
    </div>
  </div>
</div>

.su-global-footer--dark

Global Footer with soft black background color.

Example Markup

<div class="su-global-footer su-global-footer--dark">
  <div class="su-global-footer__container" title="Common Stanford resources">
    <div class="su-global-footer__brand">
      <a class="su-logo su-global-footer--dark" href="https://www.stanford.edu">
        Stanford
        <br />
        University
      </a>
    </div>
    <div class="su-global-footer__content">
      <nav aria-label="global footer menu">
        <ul class="su-global-footer__menu su-global-footer__menu--global">
          <li>
            <a href="https://www.stanford.edu">
              Stanford Home
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://visit.stanford.edu/plan/">
              Maps &amp; Directions
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/search/">
              Search Stanford
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://emergency.stanford.edu">
              Emergency Info
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
        </ul>
        <ul class="su-global-footer__menu su-global-footer__menu--policy">
          <li>
            <a href="https://www.stanford.edu/site/terms/" title="Terms of use for sites">
              Terms of Use
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/site/privacy/" title="Privacy and cookie policy">
              Privacy
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://uit.stanford.edu/security/copyright-infringement" title="Report alleged copyright infringement">
              Copyright
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://adminguide.stanford.edu/chapter-1/subchapter-5/policy-1-5-4" title="Ownership and use of Stanford trademarks and images">
              Trademarks
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://studentservices.stanford.edu/more-resources/student-policies/non-academic/non-discrimination" title="Non-discrimination policy">
              Non-Discrimination
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
          <li>
            <a href="https://www.stanford.edu/site/accessibility" title="Report web accessibility issues">
              Accessibility
              <span class="su-global-footer__link-a11y">(link is external)</span>
            </a>
          </li>
        </ul>
      </nav>
      <div class="su-global-footer__copyright">
        <span>&copy; Stanford University.</span>
        <span>&nbsp; Stanford, California 94305.</span>
      </div>
    </div>
  </div>
</div>

Main Content

Description

Example Markup

Example Markup

Example Markup