Der Layer ist eine weiße Box, die in einer separaten Ebene über der Seite geöffnet wird. In ihr können Inhalte außerhalb des eigentlichen Seiteninhalts angezeigt werden, ohne die Seite verlassen zu müssen, so dass der Nutzer den ursprünglichen Kontext nicht verliert.

Der Layer ist ein sehr komplexes Pattern mit einer Reihe von Konfigurationsmöglichkeiten und Funktionalitäten, die in den technischen Hinweisen ausführlich beschrieben sind.

In der Standardvariante nimmt der Layer in den Breakpoints S und M die volle Breite und Höhe des Viewports ein. In L und XL hingegen ist er in der Breite auf 83,3% bzw. 66,6% und 600px in der Höhe begrenzt.
Einen Unterschied zwischen den Breakpoints gibt es ebenfalls bei der Positionierung der Fläche mit dem "Schließen-X": Auf S, L und XL ist sie oberhalb der Box angeordnet und auf M rechts daneben, um den Platz in der Breite hier optimal auszunutzen.
Sowohl die Größe als auch die Anzeige des "Schließen-X" können mit den zur Verfügung stehenden Optionen konfiguriert werden.

Hinweis: In Layern sollten keine Formularelemente eingesetzt werden, da diese Kombination vor allem in mobilen Browsern häufig zu Darstellungsproblemen führt. Stattdessen sollte für komplexere Inhalte besser eine eigene Seite angelegt werden.

Das Popup ist ein neues Browserfenster, das zusätzlich zu der bereits angezeigten Seite geöffnet wird. Am häufigsten werden Popups verwendet, um Inhalte von externen Seiten anzuzeigen, die nicht in Layer integriert werden können. Da Popups die Gefahr bergen, den Nutzer von der ursprünglichen Seite abzulenken, sollten sie mit Bedacht eingesetzt werden.

In der Standardvariante ist ein Popup maximal 800px breit und 575px hoch. Diese Größen können aber auch konfiguriert werden.

The Focused Dialog is being used for complex tasks that are taking place in a new context. It is especially used when the task requires to navigate back and forward. Keep in mind that the user might loose his orientation in his overall journey due to the focused dialog.

The Focused Dialog is opening in a new view without header. On Desktop, the width is fixed to 600px. The height is defined by the content. The menu bar is optional. It’s always placed below the content. If the content is higher than the view, the menu bar sticks to the bottom.

When multiple focused dialoges are opened on top of each other, the close button closes all dialogs and returns to the URL set in the query parameter.

With the css class pl_focussed-dialog--hideInApp you can hide the footer and logo in the app.

The Sheet is being used for simple tasks that are connected to the current context. It shows additional information or interactions without leaving the context.

The Sheet slides in on top of the current view. The height is defined by its content. When the content fills the whole height, it is scrollable. The title can be up to two lines long and will be pointed out afterwards. The menu bar is optional. When used it sticks to the bottom.

The Sheet is ready for production use. This mainly includes use cases for secondary information or simple/straight-forward interactions.

When it comes to building more complex use cases such as navigation/content-switching, please consider consulting with Team Assets beforehand. The exposed functions of the sheet and inner workings in that context are still slightly under development and might change to some degree.