Layers

figma:ready
react:ready
scss:ready
freemarker:ready
vue:ready
Usage
Code
Accessibility

In modern layouts, a layer is a way to give further actions or display to the user specific content without breaking the user flow, like login or cart overview.

Usages

Be aware

Never use a layer as way to hide content from the user.

Here are a few examples of layers use cases to know this component better:

  • Login: as a way to avoid to break the user's flow in some specific cases. For example, when the user needs to login to go further.
  • Cart overview: to display the cart without breaking the user flow.
  • List: to display large amount of informations and allow the user to make a choice.
Keep data in mind

Layers can be a great way to offer option choice to the user but keep in mind that it must depend on the data. It is useless to use a layer for just simple color choice but a layer can be great if you need to give visual indications to the user.

Overview

Layers-Anatomy

Layers are a combination of the following elements:

  • A layer title
  • A content
  • A layer footer with actions (actions are optional)
  • An overlay

Layer title

The layer title should recall the action clicked by the user.

Content

Depending of the context, it can be a login, a cart preview, a list, etc.

The footer section is where you will find the call to action button(s). You will find different variations to suit your needs such as:

  • A single call to action button
  • A primary call to action button accompanied with a secondary button to give the user an alternative
  • A primary call to action button with a link to redirect the user to a page to give more informations

Overlay

Layers must be used with an overlay to focus user's attention on the content.

Behaviors

Layers are always displayed from the side of the page and appear above the content of the page with a dark overlay.

Specific variation

Extended width

In the case you have complex elements to display inside the layer and need some air, you can use an extended width for the layers from the breakpoint M.

Be aware

Never use an extended layer like an alternative of a page. Keep in mind that a layer is a way to give further actions or display to the user specific content without breaking the user flow.

Do's and Don'ts

Please use modals to display informative contents.

Never use a layer for a massive content, don't be afraid to change page.

Never use a layer as a navigation element.

Never use a layer as way to hide content from the user.