Layer-Based Patterns

This guide provides clarification among the 3 types of layer-based patterns in our design system: Tooltips, Layers, Modals

 

Tooltips

Tool tips display a small amount of information upon click/tap. Its content is informational text only.

View detailed usage guidelines and resources

Overview

Tooltips give more information about the associated content, while allowing the user to remain in their current context.

  • UI elements included:
    • Caret pointing to the link that opened the tool tip – required
    • Close X – required
    • Title – optional
  • Tooltip closes when any of the following happens:
    • Clicking the close X
    • Clicking anywhere outside the layer
    • Clicking the originating element.
    • Opening another layer of any kind
  • Usage guidelines (content/context/how triggered):
    • Text is 360 characters or less, information only; no decisions or navigation (links, CTAs)
    • Opened by a click/tap (only)
    • Irrelevant on small devices (mWeb/app)

 


Layers

SPL_layers_example2

Layers display larger amounts of information (than tooltips) upon click/tap.
Its content is informational text and links only.

View detailed usage guidelines and resources

Overview

  • UI elements included:

    • Close X – required
    • Scroll bar – displays as needed
    • Title – required
    • Links – optional
  • Layer closes when any of the following happen:
    • Close X
    • Click or scroll outside of layer
    • Opening another layer of any kind
  • Usage guidelines (content/context/how triggered):
    • Text is 361 characters or more
    • Informational text and links only – No decisions (buttons or text CTAs)
    • Opened by a click/tap (only)

 


Modals

Modals create a “mode” where parent window can’t be used; or indicate a new mode / state. They require users to act explicitly in order to exit the mode and return to the parent window, or proceed to another.
The background is intentionally dimmed (“lightbox”) to give focus/call attention and clearly communicate the availability of the parent window. We limit the application of lightbox pattern solely to modal windows.

View detailed usage guidelines and resources

Overview

  • UI elements included:

    • Curtain / lightbox – required
    • Buttons (2 or more) – required
    • Scroll bar – displays as needed
    • UI elements (text box, checkbox, radio, accordion, etc) – optional
    • Title – required
  • Modal Closes:
    • Clicking one of the buttons
  • Usage guidelines (content/context/how triggered):
    • Used to inform users about critical information, require users to make decisions, or encapsulate multiple tasks within a discrete process.
    • Used in any instance where CTA button or other UI form elements are needed
    • Opened by a click/tap or other user-initiated action (in the case of warning dialogs)

 

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.