Layering

Layering in the Morningstar Design System is defined through a combination of z-index, overlays, and drop shadows. Use layering to focus the user’s attention on a task, provide temporary supplementary information, or define spatial relationships between content.

Z-index

Z-index is a CSS property that specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Z-index is defined within MDS through the following Constants:

Z-index
Constant
Use
Examples

1

$mds-z-index-low

Page content

Most page elements, including Tooltips and Popovers

100

$mds-z-index-sticky

Sticky content

Sticky page elements, like mastheads (and Popovers triggered from a masthead) and navigation

800

$mds-z-index-modal-overlay

Modal overlay

Modal page overlay

810

$mds-z-index-modal-content

Modal content

Modals, Dialogs, Notifications

900+

$mds-z-index-top-of-the-world

As needed

Reserved for edge cases

Overlays

Overlays work in concert with Modals and Dialogs to temporarily obstruct a user’s access to the underlying page and focus their attention on the content above the overlay. Overlays use a shared class, .mds-overlay, to apply a combination of $mds-color-black and $mds-opacity-overlay to dim the underlying page without hiding it completely.

Example of an overlay used to focus attention on a dialog prompting a user to save their changes. Overlays focus attention on the content above the overlay by obstructing access to the underlying page.

Drop Shadows

Drop shadows visually simulate layering by casting a shadow on objects that fall lower in the z-index. Drop shadows are defined by constants and applied to mastheads, Modals, Dialogs, Tooltips, Popovers, and Notifications.

Variable name
Value

$mds-box-shadow-drop

0 2px 4px 0 rgba(0, 0, 0, .08);

Example of drop shadows on popovers, tooltips and mastheads. Drop shadows simulate layering by casting a shadow on objects with a lower z-index.
©2020 Morningstar, Inc. All rights reserved. Terms of Use