Page Shells

Page shells are prebuilt, responsive page containers.

See the Navigation pattern for more information.

Variations

Horizontal Navigation

Use to present a Masthead, horizontal Site Navigation – including a responsive Hidden Menu – and site or application content.

<div class="mds-page-shell">
    <div class="mds-page-shell__header">
        <div class="mds-page-shell__header-inner">
            <h1>Masthead / Site Navigation Go Here</h1>
        </div>
    </div>
    <div class="mds-page-shell__site-navigation">
        <div class="mds-page-shell__site-navigation-inner">
            <h1>Hidden Menu Goes Here</h1>
        </div>
    </div>
    <div class="mds-page-shell__content">
        <h1>Page Content Goes Here</h1>
    </div>
</div>
  • Use when your content and/or functionality can be divided up in to a number of sections that fit comfortably in the available horizontal space.
    • The number of items that will fit in horizontal navigation depends on the item-labels’ lengths and should be determined by a product team in partnership with a content strategist, when possible.
  • Masthead and Site Navigation don’t stick on scroll.
    • Include the mds-page-shell__header--sticky modifier class to .mds-page-shell__header make the Masthead and Site Navigation stick to the top edge of the viewport.
  • Add the mds-page-shell__header--tall modifier class to .mds-page-shell__header when using a tall Masthead.

Responsiveness

At smaller viewports, Site Navigation is replaced by a Hidden Menu. Hidden Menus use the vertical Site Navigation style and are accessible via a menu button located in the Masthead Left Controls.

Vertical Navigation

Use to present a Masthead, vertical Site Navigation –including a responsive Hidden Menu – and site or application content.

<div class="mds-page-shell mds-page-shell--on-canvas-vertical-navigation">
    <div class="mds-page-shell__header mds-page-shell__header--sticky mds-page-shell__header--masthead-only">
        <div class="mds-page-shell__header-inner">
            <h1>Masthead / Site Navigation Go Here</h1>
        </div>
    </div>
    <div class="mds-page-shell__site-navigation mds-page-shell__site-navigation--sticky">
        <div class="mds-page-shell__site-navigation-inner">
            <h1>Hidden Menu Goes Here</h1>
        </div>
    </div>
    <div class="mds-page-shell__content">
        <h1>Page Content Goes Here</h1>
    </div>
</div>

Responsiveness

Masthead-Only

Use to present just a Masthead.

<div class="mds-page-shell">
    <div class="mds-page-shell__header">
        <div class="mds-page-shell__header-inner">
            <h1>Masthead Goes Here</h1>
        </div>
    </div>
    <div class="mds-page-shell__site-navigation">
        <div class="mds-page-shell__site-navigation-inner"> false </div>
    </div>
    <div class="mds-page-shell__content">
        <h1>Page Content Goes Here</h1>
    </div>
</div>
  • Masthead doesn’t stick on scroll.
    • Include the mds-page-shell__header--sticky and mds-page-shell__header--masthead-only modifier classes on the .mds-page-shell__header element to make the Masthead stick to the top edge of the viewport.

Masthead-Only With Hidden Menu

Use to present a Masthead With a persistent Site Navigation Hidden Menu.

<div class="mds-page-shell mds-page-shell--off-canvas-navigation-always">
    <div class="mds-page-shell__header">
        <div class="mds-page-shell__header-inner">
            <h1>Masthead / Site Navigation Go Here</h1>
        </div>
    </div>
    <div class="mds-page-shell__site-navigation">
        <div class="mds-page-shell__site-navigation-inner">
            <h1>Hidden Menu Goes Here</h1>
        </div>
    </div>
    <div class="mds-page-shell__content">
        <h1>Page Content Goes Here</h1>
    </div>
</div>
  • Masthead doesn’t stick on scroll.
    • Include the mds-page-shell__header--sticky and mds-page-shell__header--masthead-only modifier classes on the .mds-page-shell__header element to make the Masthead stick to the top edge of the viewport.

Examples

Morningstar.com

Uses a Horizontal Navigation Page Shell to present a tall Masthead and horizontal Site Navigation with sticky behavior.

Explore Live Demo

Morningstar.com above 768px wide, using the Horizontal Navigation Page Shell with sticky behavior.

Credit Ratings

Uses a Horizontal Navigation Page Shell to present a default Masthead with a persistent Hidden Menu and horizontal Site Navigation with sticky behavior.

Explore Live Demo

Morningstar Credit Ratings above 1024px wide, using the Horizontal Navigation Page Shell with a Hidden Menu and sticky behavior.

Design System

Uses a Vertical Navigation Page Shell to present a Masthead and vertical Site Navigation.

Explore Live Demo

Morningstar Design System above 768px wide, using the Vertical Navigation Page Shell.

Retirement Manager

Uses a Masthead-only page shell to present just a Masthead with sticky behavior.

Explore Live Demo

Retirement Manager above 768px wide, using the Masthead-only Page Shell with sticky behavior.

Company Site

Uses a Masthead-Only With (persistent) Hidden Menu page shell to present a Masthead with sticky behavior and a Site Navigation Hidden Menu.

Explore Live Demo

The Company site above 768px wide, using the Masthead-only Page Shell with sticky behavior.

Guidelines

Use When

  • Setting up page-template layouts for a new website or application.
  • Arranging Masthead and Site Navigation components.
  • Configuring responsive navigation.

Visual Language

Behaviors

  • Masthead and Site Navigation don’t stick on scroll.
    • Include the mds-page-shell__header--sticky modifier class on the .mds-page-shell__header element to make the Masthead and Site Navigation stick to the top edge of the viewport.
  • At smaller viewports, Site Navigation is replaced by a Hidden Menu.
    • Choose between a 768px and 1024px breakpoint depending on the length and number of items in the Site Navigation.
  • Remove all margin and padding from the <body> element when using Page Shell. Page Shell must fill the entire viewport to work properly.

Code Reference

CSS Class References

Class
Applies to
Outcome

mds-page-shell--on-canvas-vertical-navigation

mds-page-shell

Renders the mds-page-shell vertical Site Navigation column on screen and to the left of the main content at 768px and above.

mds-page-shell--off-canvas-navigation-visible

mds-page-shell

Triggers the mds-page-shell Hidden Menu Site Navigation to slide in from the left.

mds-page-shell--off-canvas-navigation-always

mds-page-shell

Allows the Hidden Menu functionality to work at 768px and above. Use to create the Masthead-Only with Hidden Menu variation.

mds-page-shell__header--sticky

mds-page-shell__header

Sticks the header at the top of the viewport as the rest of the page is scrolled. The header can contain a combination of Masthead and horizontal Site Navigation.

mds-page-shell__header--masthead-only

mds-page-shell__header

Use when a sticky header contains only the Masthead. Ensures the page shell’s content renders just below the sticky header.

mds-page-shell__header--tall

mds-page-shell__header

Use when a sticky header contains the tall version of the Masthead. Ensures the page shell’s content renders just below the sticky header.

mds-page-shell__site-navigation--sticky

mds-page-shell__site-navigation

Sticks the left column navigation directly below the header as the rest of the page is scrolled. Use to create the Vertical Navigation variation.

©2018 Morningstar, Inc. All rights reserved. Terms of Use