Interaktionen

⭐️ Neuer Button

Das Button-Pattern, das für vielfältige Arten von Interaktionen eingesetzt werden kann, gibt es in den Größen 50 und 100 sowie in den Varianten primary und secondary.

Buttons können neben dem Text auch Icons beinhalten, um Aktionen zu verdeutlichen. Zum Beispiel "In den Warenkorb" mit einem Warenkorb-Icon oder "Suchen" mit einem Lupen-Icon. Werden Buttons als Navigations-Element eingesetzt, kann zusätzlich ein richtungsweisendes Pfeil-Icon integriert werden.

Primary

pl_button50--primary

pl_button100--primary

Secondary

pl_button50--secondary

pl_button100--secondary

Text

pl_button100--text

Fit-Content

pl_button100--primary + pl_button100--fit-content

pl_button100--secondary + pl_button100--fit-content

pl_button100--text + pl_button100--fit-content

Button

Das Button-Pattern, das für vielfältige Arten von Interaktionen eingesetzt werden kann, gibt es in drei Größen, vier Ordnungen sowie in aktiviertem und deaktiviertem Zustand. Neben dem Aussehen ist auch der Hover-Effekt mit der Anpassung des Mauszeigers Bestandteil des Patterns.

Für diese Einsatzzwecke sind die vier Ordnungen zu verwenden:

  • Die roten Buttons (1. Ordnung) sind wichtigen Primär-Aktionen vorbehalten, z.B. „In den Warenkorb“, „Zur Kasse“, „Jetzt bestellen“.
  • Die dunkelgrauen Buttons (2. Ordnung) sind nur in Sonderfällen einzusetzen, z.B. wenn der hellgraue Button in Konkurrenz zum roten Button zu unauffällig wäre.
  • Die hellgrauen Buttons (3. Ordnung) sind die Standard-Buttons.
  • Die linkähnlichen Buttons (4. Ordnung) können zum Beispiel als "Abbrechen"-Button eingesetzt werden und sollen sich klar untergeordnet ins Layout integrieren. Sie dürfen allerdings nicht für Links in Fließtexten eingesetzt werden, hierfür ist das Link-Pattern zu verwenden.

Buttons können neben dem Text auch Icons beinhalten, um Aktionen zu verdeutlichen. Zum Beispiel "In den Warenkorb" mit einem Warenkorb-Icon oder "Suchen" mit einem Lupen-Icon. Werden Buttons als Navigations-Element eingesetzt, kann zusätzlich ein richtungsweisendes Pfeil-Icon integriert werden. Zum Beispiel "< Zurück" oder "Weiter zur Bestellung >". Die Farbe der Icons richtet sich nach dem Button-Text.

button150

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

button100

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

button50

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

⭐️ Rounded Button

Der Rounded Button ist eine Spezialvariante des Buttons. Er ist rund und besitzt als Inhalt genau ein SVG Icon.

Den Rounded Button gibt es in den Größen 50 und 100.

pl_rounded50

pl_rounded100

Symbol-Button

Der Symbol-Button ist eine Spezialvariante des Buttons. Er ist rund und besitzt als Inhalt genau ein Zeichen aus der Icon-Font. Zum Einsatz kommen die Symbol-Buttons überwiegend als Navigations-Elemente ("<" ">") oder Tooltip-Basiselemente ("i" / "?").

Den Symbol-Button gibt es in fünf Größen, fünf Ordnungen sowie in aktiviertem und deaktiviertem Zustand. Neben dem Aussehen ist auch der Hover-Effekt mit der Anpassung des Mauszeigers Bestandteil des Patterns. Die Ordnungen 1-4 entsprechen denen des Button-Patterns. Die zusätzliche 5. Ordnung ist eine Variante mit semi-transparenter Hintergrundfarbe.

Bei dem symbolButton10 dürfen nur die Tooltip-Basiselemente ("i" / "?") als Inhalt verwendet werden!

symbolButton150

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton100

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton50

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton25

1. Ordnung

2. Ordnung

3. Ordnung

4. Ordnung

5. Ordnung

symbolButton10

3. Ordnung

Select-Button

Der Select-Button stellt ein Herz dar, das geklickt oder getappt werden kann.

Den Select-Button gibt es in zwei Größen (selectButton50 = 32px und selectButton100 = 40px) sowie in einem 'selected' und einem animierten Zustand. Neben dem Aussehen und der Animation ist auch der Hover-Effekt mit der Anpassung des Mauszeigers Bestandteil des Patterns.

selectButton50

1. Ordnung

selectButton100

1. Ordnung

Drop-Button

Der Drop-Button ist eine Kombination aus Button und Dropdown-Liste. Bei Benutzung löst er nicht sofort eine Aktion aus, sondern fährt zunächst eine Liste mit Auswahlmöglichkeiten aus, aus der dann die endgültige Aktion ausgewählt werden kann.

Den Drop-Button gibt es in drei Größen und vier Ordnungen sowie in aktiviertem und deaktiviertem Zustand. Die Ordnungen entsprechen denen des Button-Patterns. Neben dem Aussehen ist auch der Hover-Effekt mit der Anpassung des Mauszeigers Bestandteil des Patterns. Ebenfalls zum Pattern gehören die Funktionalitäten des Aus- und Einklappens und das automatische Ausrichten des Ausklappelements.

Der Inhalt des ausgeklappten Elements ist nicht Bestandteil des Patterns und muss separat definiert werden. In diesem Zusammenhang muss auch für eine sinvolle Maximalbreite des ausgeklappten Inhalts gesorgt werden, damit dieser nicht über den Viewport hinausragt.

dropButton150

1. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

2. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

3. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

4. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

dropButton100

1. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

2. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

3. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

4. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

dropButton50

1. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

2. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

3. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

4. Ordnung

Die Hose ist richtig toll! Der Stoff ist angenehm und schön leicht. Der Schnitt ist gut und das Bündchen ist nicht zu eng. Die Größe passt genau und die Farben sind auch schön.

⭐️ Selection Tile

Selection Tiles sind kachelförmige Elementen, über die Auswahllisten realisiert werden können. Anwendungsbeispiele sind die Auswahl von Größen, Farben oder anderen Ausführungsvarianten eines Produkts. Das Pattern gibt es in zwei Varianten: Texte beliebiger Länge und gerundet für Farben. Kacheln mit Multi-Auswahl werden an Stellen eingesetzt, an denen der Nutzer mehrere Optionen gleichzeitig wählen darf (z.B. Produktlisten-Filter).

Text

Default

Selected

Disabled

Example - Single Selection

Example - Multi Selection

Rounded

Default

Selected

Example - Single Selection

Example - Multi Selection

Auswahlkachel

Die Auswahlkacheln sind Gruppen von kachelförmigen Elementen, über die Auswahllisten realisiert werden können. Anwendungsbeispiele sind die Auswahl von Größen, Farben oder anderen Ausführungsvarianten eines Produkts. Das Pattern gibt es in zwei Größen und drei Varianten: Normal, Breit und Multi-Auswahl. Kacheln mit Multi-Auswahl werden an Stellen eingesetzt, an denen der Nutzer mehrere Optionen gleichzeitig wählen darf (z.B. Produktlisten-Filter).

Die einzelnen Kacheln besitzen einen Hover-Effekt und können neben dem normalen auch noch einen ausgewählten und einen deaktivierten Zustand annehmen.

Die durch die Auswahl einer Kachel ausgelöste Aktion ist kein Bestandteil des Patterns. Dazu gehört insbesondere auch das Verändern des Zustands der Kacheln, das selbst implementiert werden muss, dadurch aber flexibel an die jeweiligen Anforderungen angepasst werden kann.

selTiles100

mit Zahlen (mit und ohne Häkchen)

  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46
  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46

mit Zahlen und breiteren Kacheln (mit und ohne Häkchen)

  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46
  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46

mit Text (mit und ohne Häkchen)

  • Softlux-Kunstleder/Strukturstoff
  • Primabelle-Microfaser
  • Luxus-Kunstleder/ Strukturstoff
  • Softlux-Kunstleder/Strukturstoff
  • Primabelle-Microfaser
  • Luxus-Kunstleder/ Strukturstoff

mit Farben (mit und ohne Häkchen)

mit Bildern (mit und ohne Häkchen)

mit einem Bilder-Fallback für den IE (mit und ohne Häkchen)

selTiles50

mit Zahlen

  • 32
  • 34
  • 36
  • 38
  • 40
  • 42
  • 44
  • 46

mit Text

  • Softlux-Kunstleder/Strukturstoff
  • Primabelle-Microfaser
  • Luxus-Kunstleder/ Strukturstoff

mit Farben

mit Bildern

mit einem Bilder-Fallback für den IE

⭐️ Neuer Switch

Der Switch ist eine andere Darstellung einer Checkbox.

Der Switch kann mit und ohne Label dargestellt werden.

Das optionale Label wird per default links vom Switch dargestellt. Wenn das Label rechts vom Switch dargestellt werden soll, dann kann stattdessen die CSS-Klasse mit dem Suffix "--label-right" erweitert werden.

pl_switch100

pl_switch100 with a multi line label

pl_switch100 (checked)

pl_switch100 with label

pl_switch100 with label (checked)

pl_switch100--label-right with label right

pl_switch100--label-right with label right (checked)

Tooltip

Der Tooltip ist eine Sprechblase mit Zusatzinformationen. Diese Sprechblase wird nur eingeblendet, wenn der Nutzer mit einem bestimmten Basiselement interagiert. Die hier dargestellten Fragezeichen-Symbol-Buttons sind nur Beispiele und können gegen beliebige andere Basiselemente ausgetauscht werden.

Der Inhalt der Sprechblase ist standardmäßig ein String, der wie eine copy100 formatiert wird. Dieser String kann über die Angabe einer CSS-Klasse aber auch anders formatiert werden. Außerdem gibt es die Möglichkeit, durch die Angabe einer ID-Referenz komplexe Inhalte zu integrieren.

Die Sprechblase öffnet sich standardmäßig immer mittig oberhalb des Basiselements. Die Positionierung kann aber auch durch Angabe von X- und Y-Koordinaten relativ zu dieser Position verschoben werden oder die relative Positionierung kann immer abhängig zur Mauszeiger-Position erfolgen.

Bei diesem Pattern gibt es eine Unterscheidung zwischen der Bedienung per Maus und per Touch:

  • Maus: Der Tooltip öffnet sich, sobald man mit der Maus über das Basiselement fährt. Er schließt sich, sobald man das Basiselement mit der Maus wieder verlässt.
  • Touch: Der Tooltip öffnet sich bei einem Touch auf das Basiselement. Hierbei ist in der oberen rechten Ecke der Sprechblase zusätzlich ein "Schließen-X" zu sehen. Standardmäßig schließt sich der Tooltip bei einem Touch auf das X, das Basiselement oder einen anderen Ort außerhalb der Sprechblase wieder. Der Tooltip kann aber auch so konfiguriert werden, dass das Schließen-X nicht sichtbar ist oder sich der Tooltip auf Touch-Devices gar nicht öffnet.
  • Click: Der Tooltip öffnet sich bei auch auf Non-Touch-Devices mit einem Klick auf das Basiselement.

Standardvariante

mit CSS-Klasse zur Formatierung

mit CSS-Klasse zur Formatierung des gesamten Tooltip

mit ID-Referenz zur Integration von komplexen Inhalten

mit relativer Positionierung über x-y-Koordinaten

mit Positionierung über Mausanhängigkeit

ohne Schließen-X auf Touch-Devices

keine Anzeige auf Touch-Devices

Anzeige nur per Klick/Touch

als Hinweiskommunikation

als Hinweiskommunikation (Erfolg)

als Hinweiskommunikation (Fehler)

als Hinweiskommunikation (Warnung)

mit Tracking-Informationen (nur bei Klick/Touch)

Scroll-Top-Button

Mit diesem Button kann man schnell nach ganz oben scrollen.

Der Button erscheint im unteren Scrollbereich der Seite, wenn man nach oben scrollt.

⭐️ Chip

Interaktionselemente, etwa für Filter. Sie besitzen einen Pressed/ Hover State.

pl_chip--white

Standard

Type something

Mit Icon rechts

Type something

Mit Icon links

Type something

pl_chip--grey

Standard

Type something

Mit Icon rechts

Type something

Mit Icon links

Type something

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

Technische Hinweise

Für dieses Pattern sind keine technischen Hinweise vorhanden!