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.