Footer and Email Signup

Report an Issue Join the Slack Discussion

Display your signature, contact information, and links to practical information. Treat the footer as your toolbox. You don’t need to include lots of links, but the ones you do include should be utilitarian and helpful.

Usage

Usability Guidance

• Display your department’s physical address and main contact information.
• Include links to essential services and information about your department.
• If displaying more than 5-6 links, divide them into columns with clearly categorized headings.

Code Guidance

• Be sure to include the “tabindex=’1’” global attribute and value to the global footer’s social media links. This will ensure the social media links are focused in the correct order when being tabbed through.

Accessibility Requirements

• Include a link to accessibility resources, either in your footer or the global footer for UCLA.
• Use the <footer> element to clearly differentiate the container from your main content.
• Use the <address> element for your contact information and <nav> for any footer menus.

Department Footer

Code

<div class="ucla campus global-foot">
  <div class="global-foot__wrapper">
    <div class="social-links-container">
      <a class="social-icon" href="https://www.facebook.com/UCLA/"><span class="social-icon--facebook"></span><span class="visuallyhidden">Facebook</span></a>
      <a href="https://www.instagram.com/ucla/"><span class="social-icon--instagram"></span><span class="visuallyhidden">Instagram</span></a>
      <a href="https://www.linkedin.com/school/ucla"><span class="social-icon--linkedin"></span><span class="visuallyhidden">Linked</span></a>
      <a href="https://twitter.com/ucla"><span class="social-icon--twitter"></span><span class="visuallyhidden">Twitter</span></a>
      <a href="https://www.youtube.com/user/UCLA"><span class="social-icon--youtube"></span><span class="visuallyhidden">Youtube</span></a>
      <a href="https://www.tiktok.com/@ucla?lang=en"><span class="social-icon--tiktok"></span><span class="visuallyhidden">TikTok</span></a>
      <a href="https://story.snapchat.com/@uclaofficial"><span class="social-icon--snapchat"></span><span class="visuallyhidden">Snapchat</span></a>
    </div>

    <div class="global-foot__legal">

      <p class="global-foot__legal--copyright">&copy; 2022 Regents of the <a class="copy__link-a dark" href="http://www.universityofcalifornia.edu/">University of California</a></p>

      <ul class="global-foot__legal--list">
        <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="https://www.bso.ucla.edu/">Emergency</a></li>
        <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="/accessibility">Accessibility</a></li>
        <!-- <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="https://ucla-gme-advocate.symplicity.com/public_report/index.php/pid031251">Report Misconduct</a></li> -->
        <!-- <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="#">Communication Preferences</a></li> -->
        <li class="global-foot__legal--list-item"><a class="global-foot__legal--link" href="/terms-of-use/">Privacy &amp; Terms of Use</a></li>
      </ul>

    </div>
  </div>
</div>

Email Signup

Code

<div class="email">

  <h3 class="email__heading">SIGN UP</h3>
  <p class="email__description">Get the latest news, stories, and events from UCLA Strategic Communications</p>

  <form class="email__form" method="post" action="#">
    <div class="email__input-container">
      <div class="email__input email__input-email">
        <label class="email__input-label" for="Email">Email</label>
        <input type="text" id="Email" class="email__input-text" name="Email" label="Email" placeholder="joebruin@ucla.edu" aria-label="Your Email Address" required>
      </div>
      <div class="email__input email__input-firstname">
        <label class="email__input-label" for="First_Name">First Name</label>
        <input type="text" id="First_Name" class="email__input-text" name="First_Name" label="FirstName" placeholder="First Name" aria-label="Your First Name" required>
      </div>
      <div class="email__input email__input-lastname">
        <label class="email__input-label" for="Last_Name">Last Name</label>
        <input type="text" id="Last_Name" class="email__input-text" name="Last_Name" label="LastName" placeholder="Last Name" aria-label="Your Last Name" required>
      </div>
      <div class="email__input email__input-zipcode">
        <label class="email__input-label" for="Zip">Zip Code</label>
        <input type="text" id="Zip" class="email__input-text" name="Zip"  label="ZipCode" placeholder="Zip Code" aria-label="Your Zipcode" required>
      </div>
      <div class="email__input email__input-button">
        <input class="email__input-submit" type="submit" value="Sign Up" aria-label="Sign Up">
      </div>
    </div>
  </form>

  <p class="email__legal-text">
    You may unsubscribe at any time. Zip code is used to improve the content we share. Refer to our <a class="email__legal-link" href="/terms-of-use/">Terms of Use</a> for more information on how we store and protect your data.
  </p>

</div>