Das Link-Pattern sorgt für eine Formatierung von Links, worin auch der Hover-Effekt mit Anpassung des Mauszeigers eingeschlossen ist.

Die Links gibt es als Primary- und Secondary-Variante und es gibt sie mit und ohne Fontvorgaben.

Das Link-Pattern sorgt für eine Formatierung von Links, worin auch der Hover-Effekt mit Anpassung des Mauszeigers eingeschlossen ist. Der Standard-Link ist der Link erster Ordnung, der durchgehend unterstrichen als Link erkennbar ist und sich bei Mouseover rot einfärbt. Text- und Iconfarbe der Links richten sich nach dem Eltern-Element und können entsprechend der Grundfarben variieren.

Den Link gibt es in zwei Varianten: Einmal mit definierter Schriftgröße (link100) und einmal ohne (link). Für die meisten Anwendungsfälle ist der Link ohne Schriftgröße zu verwenden, da dieser automatisch die Schriftgröße des übergeordneten Elements annimmt. Für beide Varianten gibt es zwei Ordnungen und die Möglichkeit, einen Pfeil zu integrieren.

Folgendes ist beim Setzen von Links inhaltlich zu beachten:

• Linktexte sollten klar machen, wohin ein Link führt und was den Nutzer bei Benutzung erwartet.
• Linktexte sollten immer kurz gehalten werden, weshalb auch keine kompletten Sätze verlinkt werden sollten.
• Es sollte immer das Thema der Zielseite im Linktext zu finden sein und keine Wörter wie "hier" oder "weiter" verwendet werden, da der Linktext ein wichtiger Indikator für Suchmaschinen ist.

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.

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.

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.

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!

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.

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.

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).

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.

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.

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.

Mit diesem Button kann man schnell nach ganz oben scrollen.

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

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