HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Anatomy
Grommet properties
Layer closing behavior
Informational
Actionable
Double confirmations
Scroll behavior
Examples
Wizard
Layer

Fullscreen Layer

Fullscreen layers should be used for large or longer layer content.

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
full
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.

1

Layer title

Layer body content goes here.
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.

1
2

Layer title

Layer body content goes here.
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.

Related

Related content you may find useful when using Fullscreen Layer.

Layer

Layer is a component allowing content to be displayed on top of the page the user is currently on.

Side Drawer Layer

When you want to enable a user to maintain the context of their current page, side drawer layers may be used for quickly viewing an object's detail, configuring an object, or applying filter choices.

Center Layer

A center layer should be used for brief, concise confirmations or dialogs.
HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.
HPE Filtering Preview

Filtering

Allows users to create a focused data set by specifying data attributes and values of interest.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page