Gliederung
Linie
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.
line200
line100
Expander
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.
expander150
1. Ordnung
2. Ordnung
3. Ordnung
expander100
1. Ordnung
2. Ordnung
3. Ordnung
Text-Expander
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.
textExpander100
ohne Verlauf
mit Verlauf
Akkordeon
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.
accordion150
1. Ordnung
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
2. Ordnung
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
3. Ordnung
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
accordion100
1. Ordnung
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
2. Ordnung
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
3. Ordnung
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet, adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa nasce tur ridiculus mus.