Footer

Include standard navigation, social media, and legal info at the bottom of each page.

Default

Default Footer
<div class="comet-row comet-footer">
    <div class="comet-row__inner">
        <div class='comet-columns'>
            <ul class="comet-footer__link-list">
                <li class="comet-footer__link">
                    <a href="https://app.discoveryeducation.com/static/apps/check-requirements/">Check Requirements</a>
                </li>
                <li class="comet-footer__link">
                    <a href="https://get.adobe.com/reader/">Download Acrobat Reader</a>
                </li>
                <li class="comet-footer__link">
                    <a href="http://www.discoveryeducation.com/aboutus/terms_of_use.cfm">Terms of Use</a>
                </li>
                <li class="comet-footer__link">
                    <a href="http://www.discoveryeducation.com/aboutus/privacy-policy/us.cfm">Support</a>
                </li>
                <li class="comet-footer__link">
                    <a href="http://www.discoveryeducation.com/contact-us/">Contact Us</a>
                </li>
                <li class="comet-footer__link">
                    <a href="http://www.discoveryeducation.com/who-we-are/about-discovery-education.cfm">About Us</a>
                </li>
                <li class="comet-footer__link">
                    <a href="http://www.discoveryeducation.com/closed-captioning/">Online Closed Captioning</a>
                </li>
                <li class="comet-footer__link">
                    <a href="#">Live Help Chat</a>
                </li>
            </ul>
            <ul class="comet-footer__social-list">
                <li class="comet-footer__social-link">
                    <a href="https://twitter.com/DiscoveryEd">
                        <svg class="comet-footer__social-icon" aria-labelledby="title">
                            <title>twitter</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#twitter"></use>
                        </svg>
                        <span class="comet-screenreader-only">Twitter</span>
                    </a>
                </li>
                <li class="comet-footer__social-link">
                    <a href="https://www.facebook.com/discoveryed">
                        <svg class="comet-footer__social-icon" aria-labelledby="title">
                            <title>facebook</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#facebook"></use>
                        </svg>
                        <span class="comet-screenreader-only">Facebook</span>
                    </a>
                </li>
                <li class="comet-footer__social-link">
                    <a href="https://www.youtube.com/user/DiscoveryEducation">
                        <svg class="comet-footer__social-icon" aria-labelledby="title">
                            <title>youtube</title>
                            <use xlink:href="/comet/comet_assets/comet.svg#youtube"></use>
                        </svg>
                        <span class="comet-screenreader-only">YouTube</span>
                    </a>
                </li>
            </ul>
            <div class="comet-footer__legal comet-long-form-text">
                <p>Copyright &copy; 2016 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.</p>
            </div>
        </div>
    </div>
</div>
                
  • Contain the footer component in .comet-row and .comet-row__inner pair. Learn more about row.

Guidelines

Use When

  • Displaying a normal page template.

Don’t Use When

  • Displaying content in a modal.

Class Reference

Class Applies to Outcome

.comet-footer

.row

Applies font size, alignment, and multiple flat box-shadows to make the background color appear to fill the entire page when page height is less than viewport height.

.comet-theme--dark-background

comet-footer

.comet-footer__legal

div

Removes margin and adds font color to child

.comet-footer__social-link

li

Removes list-style-type and sets display to inline.

.comet-footer__social-icon

svg

Sets color and formatting for social svg icon

Macro Params Reference

Param Default Values Description

env

empty (default)

dev, qa, or stage

Adds a subdomain to footer links, directing them to the respective environment.