Footer

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.

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.

Anatomy

Department Footer Anatomy Image
  1. Department Logo (required)
  2. Department Contact Information (required)
  3. Department Social Channels (optional)
  4. Department Links (optional)
  5. Department Link Heading (optional)
  6. Department Link (optional)

States

Department Footer States Image

Specs

Department Footer Specs Image

Code

Anatomy

Global Footer Anatomy Image
  1. Copyright (required)
  2. Global Links (required)
  3. Global Social Channels (required)

States

Global Footer States Image

Specs

Global Footer Specs Image

Code

Email Signup

Anatomy

Email Signup Anatomy Image
  1. Heading (required)
  2. Description (optional)
  3. Input Fields (required)
  4. Legal (required)
  5. Submit Button (required)
  6. Background (required)

Specs

Email Signup Specs Image

Code