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.
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-92479">
<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-73563">
<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-73563" 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-73563" 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>
<div class="comet-page-shell__global-nav-bar js-comet-page-shell__global-nav-bar" role="region" aria-label="Global Navigation">
<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 referenceHomepage
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.
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-85437">
<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-47532">
<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-47532" 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-47532" 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>
<div class="comet-page-shell__global-nav-bar js-comet-page-shell__global-nav-bar" role="region" aria-label="Global Navigation">
<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 referenceLegacy
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.
Figure: Legacy Layout, No Page Shell
Class Reference
The modifier classes below are added to the root div.comet-page-shell element.
| Class | Outcome |
|---|---|
|
|
Causes the global nav bar section to be fully expanded |
|
|
Keeps the global nav bar section fully expanded (use on Homepage only) |
|
|
Displays the off-canvas nav at narrow viewports |
|
|
Prevents the global nav bar section from closing while the global nav bar is in customize mode |
|
|
Reveals the off-canvas panel |
|
|
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 |
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 |