Global Footer

The global footer appears at the bottom of every page and provides access to essential institutional and legal information. It includes the current copyright year and links to key resources such as Regents of the University of California, Emergency, Accessibility, Report Misconduct, Privacy & Terms of Use, and Cookie Settings.

When to use

Use the global footer on every page of a website or application to provide consistent access to required institutional, legal, and support links.

Anatomy

1. Copyright (required)

2. Reagents of the University of California Link (required)

• Links to https://www.universityofcalifornia.edu

3. UCLA link

• Links to https://www.ucla.edu

4. Emergency Link (required)

• Links to https://bso.ucla.edu

5. Accessibility Link (required)

• Links to https://www.ucla.edu/accessibility

6. Report Misconduct Link (required)

• Links to https://ucla-ocr.caseiq.app/portal/reportonline

7. Privacy & Terms of Use Link (required)

• Links to https://www.ucla.edu/terms-of-use

Examples

<div class="ucla-global-footer">
  <div class="ucla-global-footer__container">

    <p class="ucla-global-footer__copyright">&copy; <span id="ucla-global-footer__copyright-year">
        <script>document.getElementById('ucla-global-footer__copyright-year').appendChild(document.createTextNode(new Date().getFullYear()))</script>
    </span> Regents of the
      <a
        class="copy__link-a dark"
        href="http://www.universityofcalifornia.edu/"
      >University of California</a>
    </p>

    <ul class="ucla-global-footer__list">
      <li class="ucla-global-footer__list-item"><a
          class="ucla-global-footer__link"
          href="https://www.ucla.edu/"
        >UCLA</a></li>
      <li class="ucla-global-footer__list-item"><a
          class="ucla-global-footer__link"
          href="https://www.bso.ucla.edu/"
        >Emergency</a></li>
      <li class="ucla-global-footer__list-item"><a
          class="ucla-global-footer__link"
          href="https://www.ucla.edu/accessibility"
        >Accessibility</a></li>
      <li class="ucla-global-footer__list-item"><a
          class="ucla-global-footer__link"
          href="https://ucla-ocr.caseiq.app/portal/reportonline"
        >Report Misconduct</a></li>
      <li class="ucla-global-footer__list-item"><a
          class="ucla-global-footer__link"
          href="https://www.ucla.edu/terms-of-use/"
        >Privacy &amp; Terms of Use</a></li>
    </ul>
  </div>
</div>

The global footer consist of the following parts: main container, inner container, copyright, emergency links, and social media links.

Container

The container for the global footer has two parts. A main container that provides the color and the inner container that sets the width of the contents.

  <div class="ucla-global-footer">
    <div class="ucla-global-footer__container"></div>
  </div>

Copyright

The copyright text is a <p> text with a link to http://www.universityofcalifornia.edu.

<!-- ... -->
<p class="ucla-global-footer__copyright">&copy; 2023 Regents of the <a class="copy__link-a dark" href="http://www.universityofcalifornia.edu/">University of California</a></p>
<!-- ... -->

Emergency Link

The emergency links is a simple inline navigation list. To build it, simply follow this structure:

• .ucla-global-footer__list - <ul>
  • .ucla-global-footer__list-item - <li>
    • .ucla-global-footer__link - <a>

<!-- ... -->
<ul class="ucla-global-footer__list">
    <li class="ucla-global-footer__list-item"><a class="ucla-global-footer__link" href="https://www.bso.ucla.edu/">Emergency</a></li>
    <li class="ucla-global-footer__list-item"><a class="ucla-global-footer__link" href="https://www.ucla.edu/accessibility">Accessibility</a></li>
    <li class="ucla-global-footer__list-item"><a class="ucla-global-footer__link" href="https://equity.ucla.edu/report-an-incident">Report Misconduct</a></li>
    <li class="ucla-global-footer__list-item"><a class="ucla-global-footer__link" href="/terms-of-use/">Privacy &amp; Terms of Use</a></li>
</ul>
<!-- ... -->

Social Media Links

These social media links are the campus-wide accounts.

For department social media links, please refer to the Department Footer

This is built with the following structure:

• .ucla-social- <ul>
  • .ucla-social__item - <li>
    • .ucla-social__link - <a>
      • .visuallyhidden - Accessibility Text
      • <svg> - Logo icon for corresponding social media

<!-- ... -->
<ul class="ucla-social">
  <li class="ucla-social__item">
      <a href="#" class="ucla-social__link">
          <span class="visuallyhidden">Social Media</span>
          <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <!-- ... -->
          </svg>
      </a>
  </li>
  <!-- ... -->
</ul>
<!-- ... -->

Put it all together and you should have something like this:

Preview Example