Skip to main content Skip to navigation

Page Shell

The page shell responsively lays out global navigation components around page content.

page shell Figure: Page Shell Sections

The page shell enforces a responsive arrangement of containers, determining what goes where at each breakpoint. It also layers components and page content in the z-index, determining how components sit ‘on top of’ one another.

page shell layers Figure: Page Shell Layers

Standard

  • Use on all pages that appear in a standard browser window.
  • Never use on popup windows.
<a href="#mainContentAnchor" class="comet-screenreader-only comet-skiplinks">Skip to main content</a>
<a href="#mainNavAnchor" class="comet-screenreader-only comet-skiplinks">Skip to navigation</a>
<div class="comet-page-shell">
    <div id="comet-page-shell__product-well" class="comet-page-shell__product-well">
        <div class="comet-page-shell__product-well-inner">
            <div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-science comet-product-bar--semi-transparent comet-product-bar__search-revealed-static">
                <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
                    <span class="comet-screenreader-only">View Navigation</span>
                    <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
                    <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
                </a>
                <a class="comet-product-bar__product-title" href="#">
                    <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#science-techbook"></use>
                    </svg>
                    <span class="comet-screenreader-only">science-techbook</span>
                </a>
                <nav>
                    <ul class="comet-product-bar__breadcrumbs">
                        <li class="comet-product-bar__breadcrumb-separator">
                            <svg class="comet-product-bar__breadcrumb-separator-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                            </svg>
                        </li>
                        <li class="comet-product-bar__breadcrumb">
                            <a class="comet-product-bar__breadcrumb-link" href="/link/to/physical-science">
                                <span class="comet-product-bar__breadcrumb-text">
                                    Physical Science
                                </span>
                            </a>
                        </li>
                        <li class="comet-product-bar__breadcrumb-separator">
                            <svg class="comet-product-bar__breadcrumb-separator-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                            </svg>
                        </li>
                        <li class="comet-product-bar__breadcrumb">
                            <a class="comet-product-bar__breadcrumb-link" href="/link/to/unit-1">
                                <span class="comet-product-bar__breadcrumb-truncated-text">
                                    1
                                </span>
                                <span class="comet-product-bar__breadcrumb-text">
                                    <span class='comet-product-bar__breadcrumb-dim-text'>UNIT 1</span> The Universe
                                </span>
                            </a>
                        </li>
                    </ul>
                </nav>
                <ul class="comet-product-bar__actions">
                    <li class="comet-product-bar__action comet-product-bar__action--search">
                        <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-18726">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class='comet-screenreader-only'>Search</span>
                        </button>
                        <div class="comet-product-bar__search">
                            <div class="comet-product-bar__search-inner">
                                <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                                    <label class="comet-screenreader-only" for="q">Search</label>
                                    <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                                    <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                        <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                            <ul class="comet-list-group__list">
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil war</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil rights</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil rights movement</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil rights act</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil war video</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                        <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                            <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                        </svg>
                                        <span class="comet-screenreader-only">Search</span>
                                    </button>
                                </form>
                                <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                    </svg>
                                    <span class="comet-screenreader-only">Close Search</span>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="comet-product-bar__action comet-product-bar__action--profile">
                        <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-43450">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                            </svg>
                            <span class='comet-screenreader-only'>Show Profile</span>
                        </button>
                        <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-43450" data-comet-popover-align="left">
                            <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <div class="comet-product-bar__profile-dropdown-header">
                                    <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                                    <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-43450" href="#">
                                        <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                        </svg>
                                        <span class="comet-screenreader-only">Close</span>
                                    </a>
                                </div>
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                        <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                            <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                            <span class="comet-list-group__row-label">
                                                <span class="comet-product-bar__view-profile-name-text">
                                                    Aleksandr Romanov Kuznetsov
                                                </span>
                                                <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">
                                                Help
                                            </span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">
                                                My Admin
                                            </span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">
                                                Logout
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                        <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                            <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                            </svg>
                            <span class='comet-screenreader-only'>Quicklist</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- START OF PRODUCT WELL CONTENT -->
            <!-- Placeholder image representing content -->
            <img src="/images/components/page-shell/science-page-shell-example.png" alt="Product Well Content">
            <!-- END OF PRODUCT WELL CONTENT -->
        </div>
        <div class="comet-page-shell__product-well-overlay js-comet-page-shell__product-well-overlay">
            <div class="comet-page-shell__close-global-nav-bar-wrap">
                <a href="#comet-page-shell__product-well" class="comet-page-shell__close-global-nav-bar js-comet-page-shell__close-global-nav-bar">
                    <span class="comet-screenreader-only">Jump to page content</span>
                    <svg class="comet-page-shell__close-global-nav-bar-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </div>
        </div>
        <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-hidden="true" focusable="false">
                                    <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-hidden="true" focusable="false">
                                    <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-hidden="true" focusable="false">
                                    <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>
    </div>
    <div class="comet-page-shell__global-nav-bar js-comet-page-shell__global-nav-bar">
        <div class="comet-page-shell__global-nav-bar-touch-overlay js-comet-page-shell_global-nav-bar-touch-overlay"></div>
        <a id="mainNavAnchor" class="comet-screenreader-only" tabindex="0">Navigation Menu</a>
        <!-- START OF GLOBAL NAV BAR CONTENT -->
        <div class="comet-long-form-text">
            <h2>Global Nav Bar Content</h2>
        </div>
        <!-- END OF GLOBAL NAV BAR CONTENT -->
    </div>
    <div class="comet-page-shell__panel">
        <div class="comet-page-shell__panel-content">
            <div class="comet-page-shell__close-panel-wrap">
                <a href="#comet-page-shell__product-well" class="comet-page-shell__close-panel js-comet-page-shell__close-panel">
                    <span class="comet-screenreader-only">Jump to page content</span>
                    <svg class="comet-page-shell__close-panel-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </div>
            <!-- START OF PANEL CONTENT -->
            <div class="comet-long-form-text">
                <h2>Panel Content</h2>
            </div>
            <!-- END OF PANEL CONTENT -->
        </div>
    </div>
</div>
                
{% call comet.page_shell() %}
    {% call comet.page_shell_product_well() %}
        {{ comet.product_bar(
            class="comet-product-bar--theme-product-science comet-product-bar--semi-transparent", 
            product_title="science-techbook", 
            breadcrumbs=[
                {   text: "Physical Science", 
                    href: "/link/to/physical-science"
                }, 
                {   
                    text: "<span class='comet-product-bar__breadcrumb-dim-text'>UNIT 1</span> The Universe", 
                    href:"/link/to/unit-1",
                    truncated_text: "1"
                }]) 
        }}
        <!-- START OF PRODUCT WELL CONTENT -->
            <!-- Placeholder image representing content -->
            <img src="/images/components/page-shell/science-page-shell-example.png" alt="Product Well Content">
        <!-- END OF PRODUCT WELL CONTENT -->
    {% endcall %}
    {% call comet.page_shell_global_nav_bar() %}
        <!-- START OF GLOBAL NAV BAR CONTENT -->
        <div class="comet-long-form-text">
            <h2>Global Nav Bar Content</h2>
        </div>
        <!-- END OF GLOBAL NAV BAR CONTENT -->
    {% endcall %}
    {% call comet.page_shell_panel() %}
        <!-- START OF PANEL CONTENT -->
        <div class="comet-long-form-text">
            <h2>Panel Content</h2>
        </div>
        <!-- END OF PANEL CONTENT -->
    {% endcall %}
{% endcall %}
                
Macro params reference

Homepage

The My DE page for all user roles displays a unique variation of the page shell. At large viewports, this variation compresses the page container in order to show the expanded view of global nav bar. The product bar is layered on top of the page container.

  • Never use the homepage variation on other pages.

page shell homepage Figure: Homepage Page Shell Sections

<a href="#mainContentAnchor" class="comet-screenreader-only comet-skiplinks">Skip to main content</a>
<a href="#mainNavAnchor" class="comet-screenreader-only comet-skiplinks">Skip to navigation</a>
<div class="comet-page-shell comet-page-shell--global-nav-bar-expanded-always">
    <div id="comet-page-shell__product-well" class="comet-page-shell__product-well">
        <div class="comet-page-shell__product-well-inner">
            <div class="comet-product-bar js-comet-product-bar comet-product-bar--gradient comet-product-bar__search-revealed-static">
                <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
                    <span class="comet-screenreader-only">View Navigation</span>
                    <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
                    <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
                </a>
                <ul class="comet-product-bar__actions">
                    <li class="comet-product-bar__action comet-product-bar__action--search">
                        <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-88828">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class='comet-screenreader-only'>Search</span>
                        </button>
                        <div class="comet-product-bar__search">
                            <div class="comet-product-bar__search-inner">
                                <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                                    <label class="comet-screenreader-only" for="q">Search</label>
                                    <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                                    <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                        <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                            <ul class="comet-list-group__list">
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil war</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil rights</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil rights movement</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil rights act</span>
                                                    </a>
                                                </li>
                                                <li class="comet-list-group__row">
                                                    <a class="comet-list-group__row-anchor" href="#">
                                                        <span class="comet-list-group__row-label">civil war video</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                        <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                            <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                        </svg>
                                        <span class="comet-screenreader-only">Search</span>
                                    </button>
                                </form>
                                <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                    </svg>
                                    <span class="comet-screenreader-only">Close Search</span>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li class="comet-product-bar__action comet-product-bar__action--profile">
                        <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-79359">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                            </svg>
                            <span class='comet-screenreader-only'>Show Profile</span>
                        </button>
                        <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-79359" data-comet-popover-align="left">
                            <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <div class="comet-product-bar__profile-dropdown-header">
                                    <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                                    <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-79359" href="#">
                                        <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                        </svg>
                                        <span class="comet-screenreader-only">Close</span>
                                    </a>
                                </div>
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                        <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                            <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                            <span class="comet-list-group__row-label">
                                                <span class="comet-product-bar__view-profile-name-text">
                                                    Aleksandr Romanov Kuznetsov
                                                </span>
                                                <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                            </span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">
                                                Help
                                            </span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">
                                                My Admin
                                            </span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">
                                                Logout
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                        <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                            <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                            </svg>
                            <span class='comet-screenreader-only'>Quicklist</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- START OF PRODUCT WELL CONTENT -->
            <!-- Placeholder image representing content -->
            <img src="/images/components/page-shell/homepage-page-example.png" alt="Product Well Content">
            <!-- END OF PRODUCT WELL CONTENT -->
        </div>
        <div class="comet-page-shell__product-well-overlay js-comet-page-shell__product-well-overlay">
            <div class="comet-page-shell__close-global-nav-bar-wrap">
                <a href="#comet-page-shell__product-well" class="comet-page-shell__close-global-nav-bar js-comet-page-shell__close-global-nav-bar">
                    <span class="comet-screenreader-only">Jump to page content</span>
                    <svg class="comet-page-shell__close-global-nav-bar-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </div>
        </div>
        <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-hidden="true" focusable="false">
                                    <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-hidden="true" focusable="false">
                                    <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-hidden="true" focusable="false">
                                    <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>
    </div>
    <div class="comet-page-shell__global-nav-bar js-comet-page-shell__global-nav-bar">
        <div class="comet-page-shell__global-nav-bar-touch-overlay js-comet-page-shell_global-nav-bar-touch-overlay"></div>
        <a id="mainNavAnchor" class="comet-screenreader-only" tabindex="0">Navigation Menu</a>
        <!-- START OF GLOBAL NAV BAR CONTENT -->
        <div class="comet-long-form-text">
            <h2>Global Nav Bar Content</h2>
        </div>
        <!-- END OF GLOBAL NAV BAR CONTENT -->
    </div>
    <div class="comet-page-shell__panel">
        <div class="comet-page-shell__panel-content">
            <div class="comet-page-shell__close-panel-wrap">
                <a href="#comet-page-shell__product-well" class="comet-page-shell__close-panel js-comet-page-shell__close-panel">
                    <span class="comet-screenreader-only">Jump to page content</span>
                    <svg class="comet-page-shell__close-panel-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </div>
            <!-- START OF PANEL CONTENT -->
            <div class="comet-long-form-text">
                <h2>Panel Content</h2>
            </div>
            <!-- END OF PANEL CONTENT -->
        </div>
    </div>
</div>
                
{% call comet.page_shell(class="comet-page-shell--global-nav-bar-expanded-always") %}
    {% call comet.page_shell_product_well() %}
        {{ comet.product_bar(class="comet-product-bar--gradient") }}
        <!-- START OF PRODUCT WELL CONTENT -->
            <!-- Placeholder image representing content -->
            <img src="/images/components/page-shell/homepage-page-example.png" alt="Product Well Content">
        <!-- END OF PRODUCT WELL CONTENT -->
    {% endcall %}
    {% call comet.page_shell_global_nav_bar() %}
        <!-- START OF GLOBAL NAV BAR CONTENT -->
        <div class="comet-long-form-text">
            <h2>Global Nav Bar Content</h2>
        </div>
        <!-- END OF GLOBAL NAV BAR CONTENT -->
    {% endcall %}
    {% call comet.page_shell_panel() %}
        <!-- START OF PANEL CONTENT -->
        <div class="comet-long-form-text">
            <h2>Panel Content</h2>
        </div>
        <!-- END OF PANEL CONTENT -->
    {% endcall %}
{% endcall %}
                
Macro params reference

Legacy

Optionally, legacy applications that are hard to modify or slated for retirement may use this simplified variation, which uses a simplified variation of the product bar and does not use a page shell.

legacy product bar Figure: Legacy Layout, No Page Shell

Class Reference

The modifier classes below are added to the root div.comet-page-shell element.

Class Outcome

.comet-page-shell--global-nav-bar-expanded

Causes the global nav bar section to be fully expanded

.comet-page-shell--global-nav-bar-expanded-always

Keeps the global nav bar section fully expanded (use on Homepage only)

.comet-page-shell--global-nav-bar-visible

Displays the off-canvas nav at narrow viewports

.comet-page-shell--global-nav-bar-customizing

Prevents the global nav bar section from closing while the global nav bar is in customize mode

.comet-page-shell--panel-visible

Reveals the off-canvas panel

.comet-page-shell--global-nav-bar-sorting

Hides the off-canvas panel during sorting so the page can't be scrolled horizontally

Macro Params Reference

There are four macros that make up the Page Shell:

  • page_shell()
  • page_shell_product_well()
  • page_shell_global_nav_bar()
  • page_shell_panel()

Page Shell

Param Values Description

class

false (default) or string

Space separated classes added to the div.comet-page-shell element

Page Shell Product Well

Param Values Description

icon_path

false (default) or string

Overrides the path to the icon sprite for all the icons within the Page Shell Product Well

Page Shell Panel

Param Values Description

icon_path

false (default) or string

Overrides the path to the icon sprite for all the icons within the Page Shell Panel

Navigation Menu