Anatomy
See general layer anatomy for specifications applying to all layers.
Fullscreen layers fill the entire page. Therefore, there no rounding or elevation is visible.
Grommet properties
Apply these layer properties for a fullscreen layer.
Property | Value |
---|---|
true |
Layer closing behavior
Informational
For informational side drawer layers that do not require any user actions, place a close icon button in the layer header.
Layer title
Label | Region | Purpose | Required | Notes |
---|---|---|---|---|
1 | Close button | Closes the layer. | Use "Close" icon. |
The user should be able to close the informational layer by clicking on the close button, clicking outside, the layer, or using the Escape key.
Actionable
For actionable layers, include the close icon button in the header and a "Cancel" button alongside footer actions so the user can efficiently leave the layer if desired.
Layer title
Label | Region | Purpose | Required | Notes |
---|---|---|---|---|
1 | Close button | Closes the layer. | Including the close button in the header in addition to the footer "Cancel" button ensures the user can efficiently exit the layer if desired. | |
2 | Cancel button | Closes the layer. | The footer actions should be left aligned with primary action on the left and "Cancel" button following. The "Cancel" button should always be present as a complement to the primary action, providing an easy way to leave the layer. |
Double confirmations
When data has been edited or changed and the user tries to close the layer, a double confirmation should be shown. This helps avoid unintentional loss of work.
Learn more about the anatomy and implementation of a double confirmation on the main layer page since this behavior applies to all layer types.
Scroll behavior
The default behavior of the layer is to allow all of the content to scroll, but this behavior can be modified depending on the layer's contents.
Layer contents | Sticky region | Scroll region | Notes |
---|---|---|---|
Wizard | Header and footer | Body | A sticky footer ensures the user always has access to advance in the wizard. A sticky header maintains the wizard's context and provides persistent access to move a step back in the wizard or cancel out. |
Form | None or header can be sticky/appear on scroll up if this added context is valueable for the use case. | All content, or body and footer | The footer actions should be at the bottom of the form to encourage the user to see the entire form before submission. |
Examples
Wizard
A wizard is a specialized fullscreen layer where a task flow is divided into multiple steps. See wizard guidance for examples and details.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.