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.
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.
Layers are a combination of the following elements:
- A layer title
- A content
- A layer footer with actions (actions are optional)
- An overlay
The layer title should recall the action clicked by the user.
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
Layers must be used with an overlay to focus user's attention on the content.
Layers are always displayed from the side of the page and appear above the content of the page with a dark overlay.
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