Footer

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.

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

Anatomy

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

Specs

Code

Global Footer

Anatomy

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

States

Specs

Code

Email Signup

Anatomy

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

Specs

Code