Das universell einsetzbare Linien-Pattern dient der vertikalen Abgrenzung von Content-Elementen. Es existiert in zwei Größen, die die Stärke der Linie bestimmen.

Der pl_expander wird genutzt um innerhalb einer pl_table-view ausfahrbaren Content zu ermöglichen.

Mit Hilfe des Expander-Patterns können Klappelemente realisiert werden. Bestandteil des Patterns sind lediglich die abgebildeten Schaltflächen, die als Interaktionselement dienen. Der Expander steht in zwei Größen sowie drei Ordnungen zur Verfügung. Zusätzlich kann die horizontale Ausrichtung des Buttons auf der Schaltfläche variiert werden.

Der Text-Expander kann dazu eingesetzt werden, lange Texte initial nicht in ihrer vollen Länge darzustellen, um für eine bessere Übersichtlichkeit auf der Seite zu sorgen. Über einen Link hat der Nutzer dann die Möglichkeit, den Inhalt aus- und einzuklappen. Dieser Link ist, inklusive der Funktionalität, Bestandteil des Patterns.

Der Text-Expander kann dazu eingesetzt werden, lange Texte initial nicht in ihrer vollen Länge darzustellen, um für eine bessere Übersichtlichkeit auf der Seite zu sorgen. Über einen Link hat der Nutzer dann die Möglichkeit, den Inhalt aus- und einzuklappen. Dieser Link ist, inklusive der Funktionalität, Bestandteil des Patterns.

Optional kann ein Transparenzverlauf aktiviert werden, der für ein weiches Auslaufen des Textes sorgt.

Das Accordion ist eine Kombination mehrerer Klappelemente. Es besteht sowohl aus den Schaltflächen als auch aus den Container-Elementen für die Inhalte.

Die Funktion zum Aus- und Einklappen einzelner Elemente ist ebenfalls Bestandteil des Patterns. Welche Elemente initial aus- und welche eingeklappt dargestellt werden sollen, kann für jedes Element separat eingestellt werden.

Ein Accordion mit nur einem einzigen Ausklappelement ist zu vermeiden, da sonst die Funktion vom Nutzer nicht eindeutig erkannt werden würde.

WICHTIG: Das pl_accordion-Pattern darf ausschließlich innerhalb eines Table Views benutzt werden; nicht eigenständig! Bitte auf das Code-Beispiel achten. Das SVG innerhalb des Headers gehört ebenso zum Pattern dazu.

Das Akkordeon ist eine Kombination mehrerer Klappelemente. Es steht in zwei Größen und drei Ordnungen zur Verfügung und besteht sowohl aus den Schaltflächen als auch aus den Container-Elementen für die Inhalte.

Die Funktion zum Aus- und Einklappen einzelner Elemente ist ebenfalls Bestandteil des Patterns. Welche Elemente initial aus- und welche eingeklappt dargestellt werden sollen, kann für jedes Element separat eingestellt werden.

Ein Akkordeon darf den gesamten Content einer Seite beinhalten. Ein Akkordeon mit nur einem einzigen Ausklappelement ist zu vermeiden, da sonst die Funktion vom Nutzer nicht eindeutig erkannt werden würde.

Blocks sind strukturgebende Elemente. Sie verfügen über vorgegebene Innenabstände. Sollen Inhalte über die gesamte Breite gehen kann pl_block--full-bleed als CSS Klasse verwendet werden. Werden mehrere Blocks neben- oder übereinander verwendet so haben sie einen Abstand von 4px zueinander zu wahren. Dies ist durch den Anwender sicherzustellen.

We have 2 grid systems, that are nested into each other. The first grid system contains the lanes to align the Blocks - we call it lane grid. The second grid can be placed inside the lanes to align the content and Cards - we call it content grid.

Usage

Lane grid

The lanes can be placed on the 12-column lane grid, eg. 3 - 9 | 4 - 8 | 3 - 6 - 3. On breakpoints S (360px) & M (448px), there can only be one lane spanning all 12 columns.

Content grid

The content grid helps to align components within the lanes. It is optional.

How to use the grid on desktop

How to use the grid on mobile

Anatomy

1. column
2. gutter
3. margin

Specifications

Lane grid

Columns: 12
Gutter: 4px
Margin: 0px
Width: 100%
Max-width: 1104px

Content grid

Columns: 12
Gutter: 16px
Margin: 16px
Width: 100%