Layer & Popup

Layer

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.

Standardvariante

mit expliziter Höhe und Breite

nicht-modal mit Inline-Inhalt

mit Content-Switch

ohne Schließen-Button

ohne Schließen-Button im S- und M-Breakpoint

mit Menüleiste

mit Fehlermeldung

Layer mit alternativem Ziel für native Navigation (oder Bots)

mit Tracking-Informationen

mit base64 URL

⭐️ Fokussierter Dialog

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.

Standard mit Close URL

Langer Titel

Ohne Buttons

Mit Formular

⭐️ Sheet

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.

Standardvariante mit Content String

Standardvariante mit URL

Standardvariante mit viel Inhalt

Standardvariante mit MenuBar

Standardvariante mit base64 URL

Content-Switch Variante

Full-Bleed-Content

Für dieses Pattern ist kein Konfigurator verfügbar!

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!