Footer

The main footer in CDS is a landmark section of content at the bottom of the page. It is used to place contact information, important links, and any social media links.

For Cornell University, it is required that every footer have at least two links. One to the University Privacy website (https://privacy.cornell.edu/) and another to a page that provides contact information and information about getting Web Accessibility Assistance.

Code

<footer id="site-footer" class="{footer-color}" aria-label="Site Footer">
    <div class="band main-footer {footer-spacing} {footer-props}">
        {main-footer}
    </div>
    <div class="band sub-footer {footer-spacing} {footer-props}">
        {sub-footer}
    </div>
</footer>

The Main Footer is the first of two major parts of the footer area. This area holds any site-specific footer content which may include, but is not limited to a logo, contact information, quick links, social media links, a physical address, and/or important statements.

It is highly important that you order these in the order they are meant to be read top to bottom, as this is the order they will be display on mobile, and the order they will be read aloud to a screen reader regardless of window size.

Content within the Main Footer is designed to be open-ended, where the contents are defined by block placement within Wordpress, Drupal, or custom applications. Therefore, the layout and design may vary from project to project.

Create layouts using the Template Strucutre scheme starting with container level elements.

The sub footer is where the Copyright, University Privacy, and Web Accessibility Assistance links are expected. This markup is usually the same across all sites. You can add additional links here if they are required for the specific project you are working on. Below is a boilerplate with the standard links expected.

If you use the boilerplate example below please remember to change the URL for the Web Accessibility Assistance link to a mailto link or a separate page that has the contact information for the responsible party for accessibility compliance for the site.

<div class="container">
    <div class="subfooter-links">
        <ul>
            <li><a href="https://www.cornell.edu">Cornell University</a> ©2025</li>
            <li><a href="https://privacy.cornell.edu/">University Privacy</a></li>
        </ul>
        <ul>
            <li><a href="https://accessibility.cornell.edu/information-technology/web-accessibility/web-accessibility-assistance/">Web Accessibility Assistance</a></li>
        </ul>
    </div>
</div>

Classes

Note: These classes are identical to the band classes.

Changes the background color of the footer. The Main Footer and Sub Footer will share the same background color, with the Sub Footer being slightly darker than the Main Footer.

Classes Background Color
Default (no class) #FFFFFF
.tint #rgba(#aaaaaa, 0.09)
.tint-medium rgba(#aaaaaa, 0.18)
.tint-dark rgba(#aaaaaa, 0.36)
.dark.gray, .dark.fill #222222
.dark.gray.tint, .dark.fill.tint #141414
.dark.navy #073949
.dark.red #B31B1B

Utilize the band spacing options classes to set the amount of top and bottom padding.

You can add any text classes to the footer to modify them.