Components

Eine Component ist eine komplexere und funktionale Einheit innerhalb eines Design System. Sie ist eine Kombination aus mehreren Controls, Elementen oder anderen Komponenten, die zusammenarbeiten, um ein bestimmtes Merkmal, einen bestimmten Abschnitt oder eine bestimmte Funktionalität in der Benutzeroberfläche bereitzustellen. Komponenten sind oft umfangreicher und können verschiedene Controls und Stile umfassen.

Zu den Components gehören z.B. Navigation, Header, Table und andere übergeordnete UI-Strukturen, die aus mehreren Controls und möglicherweise zusätzlicher Logik bestehen, um eine kohärente Benutzererfahrung zu bieten.

Table

Default

Anrede	Name	Adresse	Funktion	E-Mail
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Funktion -	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Funktion -	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Funktion -	E-Mail maxmustermann@opacc.ch

Sticky Left Row

Anrede	Name	Adresse	Geburtstag	Funktion	E-Mail
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Geburtstag 01.01.1970	Funktion Frontend-Entwickler	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Geburtstag 01.01.1970	Funktion Frontend-Entwickler	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Geburtstag 01.01.1970	Funktion Frontend-Entwickler	E-Mail maxmustermann@opacc.ch

Sticky Header Row

Anrede	Name	Adresse	E-Mail
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	E-Mail maxmustermann@opacc.ch

Sticky Header und Left Row

Anrede	Name	Adresse	Geburtstag	Funktion	E-Mail
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Geburtstag 01.01.1970	Funktion Frontend-Entwickler	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Geburtstag 01.01.1970	Funktion Frontend-Entwickler	E-Mail maxmustermann@opacc.ch
Anrede Herr	Name Max Mustermann	Adresse Musterstrasse 1, 6000 Luzern, Schweiz	Geburtstag 01.01.1970	Funktion Frontend-Entwickler	E-Mail maxmustermann@opacc.ch

Table Sort

Nummer	Bezeichnung	Keyword	Dimension Nr.	BILD-ID	Sortier Nr.
Nummer FOP-521100000	Bezeichnung Sechskantschrauben Stahl sw DIN 933 8.8	Keyword Sechskantschrauben	Dimension Nr. 0	Bild-ID 521100000	Sortier Nr. 0
Nummer FOP-521550000	Bezeichnung HV-Garnituren Stahl fvz EN 14399-4/14399-6 10.9	Keyword HV-Garnituren	Dimension Nr. 0	Bild-ID 521550000	Sortier Nr. 0
Nummer FOP-521150100	Bezeichnung Sechskantschrauben Stahl sw DIN 961 8.8	Keyword Sechskantschrauben	Dimension Nr. 0	Bild-ID 521150100	Sortier Nr. 0
Nummer FOP-521180000	Bezeichnung Sechskantschrauben Stahl sw VSM 12361 8.8	Keyword Sechskantschrauben	Dimension Nr. 0	Bild-ID 521180000	Sortier Nr. 0
Nummer FOP-513010000	Bezeichnung Zylinderschrauben I-6-Kt. Stahl sw DIN 912 8.8	Keyword Zylinderschrauben	Dimension Nr. 0	Bild-ID 513010000	Sortier Nr. 0
Nummer FOP-513160000	Bezeichnung Zylinderschrauben Unbrako® I-6-Kt. sw 12.9	Keyword Zylinderschrauben	Dimension Nr. 0	Bild-ID 513160000	Sortier Nr. 0
Nummer FOP-513290000	Bezeichnung Senkschrauben 90° I-6-Kt. Stahl sw DIN 7991 10.9	Keyword Senkschrauben 90°	Dimension Nr. 0	Bild-ID 513290000	Sortier Nr. 0
Nummer FOP-513340000	Bezeichnung Senkschrauben 90° Unbrako® I-6-Kt. sw 10.9	Keyword Senkschrauben 90°	Dimension Nr. 0	Bild-ID 513340000	Sortier Nr. 0
Nummer FOP-513580000	Bezeichnung Passschrauben I-6-Kt. Stahl sw ISO 7379 12.9	Keyword Pass-Schulterschrauben	Dimension Nr. 0	Bild-ID 513580000	Sortier Nr. 0
Nummer FOP-513135000	Bezeichnung Zylinderschrauben I-6-rd sw DIN 7984 8.8	Keyword Zylinderschrauben	Dimension Nr. 0	Bild-ID 513135000	Sortier Nr. 0
Nummer FOP-524130000	Bezeichnung Zylinderschrauben Schlitz Stahl vz DIN 84 4.8	Keyword Zylinderschrauben	Dimension Nr. 0	Bild-ID 524130000	Sortier Nr. 0
Nummer FOP-527035000	Bezeichnung Stiftschrauben Stahl blank/sw DIN 939 8.8	Keyword Stiftschrauben	Dimension Nr. 0	Bild-ID 527035000	Sortier Nr. 0
Nummer FOP-527460000	Bezeichnung Flügelschrauben Temperguss vz DIN 316	Keyword Flügelschrauben	Dimension Nr. 0	Bild-ID 527460000	Sortier Nr. 0
Nummer FOP-527200000	Bezeichnung Verschluss-Schrauben Stahl blank DIN 910 5.8	Keyword Verschluss-Schrauben mit Bund	Dimension Nr. 0	Bild-ID 527200000	Sortier Nr. 0
Nummer FOP-512660600	Bezeichnung Sechskant-Rohrmuttern ~0,5 d INOX A4 DIN 431	Keyword Sechskant-Rohrmuttern ~0,5 d	Dimension Nr. 0	Bild-ID 512660600	Sortier Nr. 0
Nummer FOP-532250500	Bezeichnung Sechskantmuttern 0,5 d Stahl blank DIN 439 4/6	Keyword Sechskantmuttern 0,5 d	Dimension Nr. 0	Bild-ID 532250500	Sortier Nr. 0
Nummer FOP-521550200	Bezeichnung Sechskantmuttern HV Stahl fvz EN 14399-4 10	Keyword Sechskantmuttern HV	Dimension Nr. 0	Bild-ID 521550200	Sortier Nr. 0
Nummer FOP-532250000	Bezeichnung Sechskantmuttern 0,8 d Stahl blank ~DIN 934 Ww 8	Keyword Sechskantmuttern 0,8 d	Dimension Nr. 0	Bild-ID 532250000	Sortier Nr. 0
Nummer FOP-532189000	Bezeichnung Nutmuttern Elastic-Stop Stahl vz	Keyword Nutmuttern Elastic-Stop	Dimension Nr. 0	Bild-ID 532189000	Sortier Nr. 0
Nummer FOP-512590300	Bezeichnung Hutmuttern Messing blank DIN 917	Keyword Hutmuttern	Dimension Nr. 0	Bild-ID 512590300	Sortier Nr. 0

Web Components <tk-table>

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-head-shadow-class-name`	TypeScript-Type string	Default `tk-table__head-shadow`	Beschreibung CSS-Klasse für das Header Element, wenn der Head Sticky sein soll.
Data-Attribut `data-tk-is-sticky-left`	TypeScript-Type Boolean	Default false	Beschreibung Um die erste Spalte sticky zu setzen.
Data-Attribut `data-tk-is-sticky-header`	TypeScript-Type Boolean	Default false	Beschreibung Um den Head sticky zu setzen.
Data-Attribut `data-tk-grid-template-mobile`	TypeScript-Type string	Default 1fr	Beschreibung `grid-template-columns: 1fr;`
Data-Attribut `data-tk-loaded-class-name`	TypeScript-Type string	Default `tk-table--loaded`	Beschreibung CSS-Klasse für den Loaded-Zustand
Data-Attribut `data-tk-sticky-left-class-name`	TypeScript-Type string	Default `tk-table--sticky-left`	Beschreibung CSS-Klasse um die erste Spalte sticky zu setzen
Data-Attribut `data-tk-right-shadow-class-name`	TypeScript-Type string	Default `tk-table__right-shadow`	Beschreibung CSS-Klasse für das Shadow Element, dass rechts gesetzt wird, wenn mehrere Spalten existieren
Data-Attribut `data-tk-sticky-head-class-name`	TypeScript-Type string	Default `tk-table--sticky-head`	Beschreibung CSS-Klasse um den Head-Bereich sticky zu setzen
Data-Attribut `data-tk-col-width`	TypeScript-Type string	Default auto	Beschreibung `grid-template-columns: repeat(ANZAHL_SPALTEN, auto);`
Data-Attribut `data-tk-desktop-min-width`	TypeScript-Type number	Default 992 (px)	Beschreibung Min-Width für Desktopansicht
Data-Attribut `data-tk-table-sort` im `<table>`	TypeScript-Type boolean	Default false	Beschreibung Um die Sortierung zu aktivieren. Das data-Attribut muss auf den `<table>` Tag gesetzt werden
Data-Attribut `data-tk-asc-sort-class-name`	TypeScript-Type string	Default `tk-table--sort-asc`	Beschreibung CSS-Klasse für ASC Ansicht der Head-Spalte
Data-Attribut `data-tk-desc-sort-class-name`	TypeScript-Type string	Default `tk-table--sort-desc`	Beschreibung CSS-Klasse für DESC Ansicht der Head-Spalte
Data-Attribut `data-tk-datamaster`	TypeScript-Type string	Default undefined	Beschreibung Wird genutzt um zum Client-Modus zu wechseln mit dem Wert `client`. Damit werden alle Einträge client-seitig sortiert. Kein Paging möglich!
Data-Attribut `data-tk-col-align-start`	TypeScript-Type boolean	Default false	Beschreibung Wird genutzt um den Inhalt der Spalten innerhalb des Table-Body's linksbündig auszurichten
Data-Attribut `data-tk-col-align-start-class-name`	TypeScript-Type string	Default `tk-table__col--align-left`	Beschreibung Klasse die den `<td>` hinzugefügt wird, wenn `data-tk-col-align-start` gesetzt wurde
Data-Attribut `data-tk-col-item-align-center`	TypeScript-Type boolean	Default false	Beschreibung Wird genutzt um den Inhalt der Spalten innerhalb des Table-Body's vertikal zentriert auszurichten
Data-Attribut `data-tk-col-item-align-center-class-name`	TypeScript-Type string	Default `tk-table__col--item-align-center`	Beschreibung Klasse die den `<td>` hinzugefügt wird, wenn `data-tk-col-item-align-center` gesetzt wurde
Data-Attribut `data-tk-col-item-align-start`	TypeScript-Type boolean	Default false	Beschreibung Wird genutzt um den Inhalt der Spalten innerhalb des Table-Body's vertikal am oberen Ende auszurichten
Data-Attribut `data-tk-col-item-align-start-class-name`	TypeScript-Type string	Default `tk-table__col--item-align-start`	Beschreibung Klasse die den `<td>` hinzugefügt wird, wenn `data-tk-col-item-align-start` gesetzt wurde
Data-Attribut `data-tk-col-item-align-end`	TypeScript-Type boolean	Default false	Beschreibung Wird genutzt um den Inhalt der Spalten innerhalb des Table-Body's vertikal am unteren Ende auszurichten
Data-Attribut `data-tk-col-item-align-end-class-name`	TypeScript-Type string	Default `tk-table__col--item-align-end`	Beschreibung Klasse die den `<td>` hinzugefügt wird, wenn `data-tk-col-item-align-end` gesetzt wurde

Header

Log out

Warenkorb

Anmelden

Log in

Warenkorb

E

Back

Warenkorb

Web Components <tk-header>

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-header--sticky`	Beschreibung Macht den Header Sticky
Modifier's (BEM) `.tk-header--fullwidth`	Beschreibung Sorgt dafür, dass der Header in die volle Breite gestreckt wird. Dabei wird auch das Element `.tk-header__inner` als Wrapper gebraucht.

Selektoren	Element
Selektoren `[data-tk-to-scroll-with]`	Element Das Element das interagieren soll beim Scrollen.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-disable-scrolldown-breakpoint`	TypeScript-Type Breakpoint	Default s	Beschreibung
Data-Attribut `data-tk-scroll-delta-y`	TypeScript-Type Number	Default 1	Beschreibung Mit diesem Wert `data-tk-scroll-delta-y` hat man die Möglichkeit, dass das Scrollen auf Mobile nicht direkt ausgeführt wird. Bei jeder Berührung des Displays kann es sein, dass der Scroll-Event ausgelöst werden kann.

Footer

Default

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-footer--fullwidth`	Beschreibung Sorgt dafür, dass der Footer in die volle Breite gestreckt wird. Dabei wird auch das Element `.tk-footer__inner` als Wrapper gebraucht.

Floating

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-footer--sticky`	Beschreibung Macht den Footer Sticky
Modifier's (BEM) `.tk-footer--fullwidth`	Beschreibung Sorgt dafür, dass der Footer in die volle Breite gestreckt wird. Dabei wird auch das Element `.tk-footer__inner` als Wrapper gebraucht.

Navigation

Breadcrumb

Breadcrumb Item

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-breadcrumb-item--active`	Beschreibung Wechselt den Block zum Active-Zustand.

Status
default	default Level 1
active	active Level 1

Burger Header

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-nav-burger-header--selected`	Beschreibung Wechselt den Block zum Selected-Zustand.

Status
default	default
hover	hover
pressed	pressed
selected	selected

Burger Item

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-nav-burger-item--selected`	Beschreibung Wechselt den Block zum Selected-Zustand.

Status
default	default Level 1
hover	hover Level 1
pressed	pressed Level 1
selected	selected Level 1

Burger List

Elements (BEM)	Beschreibung
Elements (BEM) `.tk-nav-burgerlist__title`	Beschreibung Wird als Übertitel genutzt und ist ausserhalb der Navigation.
Elements (BEM) `.tk-nav-burgerlist__pages`	Beschreibung Dieses Element beinhaltet die Pages, um im Scrollsnap zu wechseln bzw. scrollen.
Elements (BEM) `.tk-nav-burgerlist__page`	Beschreibung Dieses Element repräsentiert eine Page.

Navigation Meta

Navigation Meta Item

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-nav-meta-item--selected`	Beschreibung Wechselt den Block zum Selected-Zustand.

Status
default	default Level 1
hover	hover Level 1
pressed	pressed Level 1
selected	selected Level 1

Segmented Navigation

Navigation Infinity Scroll

Navigation Infinity Scroll Item

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-nav-infinity-scroll-item--active`	Beschreibung Wechselt den Block zum Active-Zustand.

Status
default	default
active	active
hover	hover

Navigation Sidebar

Elements (BEM)	Beschreibung
Elements (BEM) `.tk-nav-sidebar__overview`	Beschreibung Dieses Element behinhaltet das Dropdown Menü um auf die vorgängigen Levels zu springen.
Elements (BEM) `.tk-nav-sidebar__wrapper`	Beschreibung Der Wrapper um die Navigation zwischen Desktop und Mobile zu wechseln.

Navigation Sidebar Item

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-nav-sidebar-item--selected`	Beschreibung Wechselt den Block zum Selected-Zustand.
Modifier's (BEM) `.tk-nav-sidebar--level-$level`	Beschreibung Ändert die Darstellung beim angegebenen Level `$code`. Maximal Level: 4
Modifier's (BEM) `.tk-nav-sidebar--list`	Beschreibung Ändert die Darstellung in die Listen-Ansicht. Wird für das Dropdown Menü gebraucht für das Erreichen der Children eines Navigation-Elements.

Status	Level 1	Level 2	Level 3	Level 4	List
default	default Level 1	default Level 2	default Level 3	default Level 4	default List
hover	hover Level 1	hover Level 2	hover Level 3	hover Level 4	hover List
pressed	pressed Level 1	pressed Level 2	pressed Level 3	pressed Level 4	pressed List
selected	selected Level 1	selected Level 2	selected Level 3	selected Level 4
selected/hover	selected/hover Level 1	selected/hover Level 2	selected/hover Level 3

Web Components <tk-nav-sidebar>

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-header--sticky`	Beschreibung Macht den Header Sticky
Modifier's (BEM) `.tk-header--fullwidth`	Beschreibung Sorgt dafür, dass der Header in die volle Breite gestreckt wird. Dabei wird auch das Element `.tk-header__inner` als Wrapper gebraucht.

Selektoren	Beschreibung
Selektoren `[data-tk-nav-wrapper]`	Beschreibung Das Root Element für die Navigation, wird genutzt um in der Mobileansicht zu öffnen und schliessen.
Selektoren `[data-tk-wrapper]`	Beschreibung Der Wrapper des Desktop-Inhalts der Navigation. Damit kann man einfach zwischen Desktop und Mobile wechseln.
Selektoren `[data-tk-nav-open="$ID"]`	Beschreibung Der Button zum Öffnen der Navigation. Die Id ist immer die Menu-ID die man der G-Funktion übergibt. Somit hat man die Möglichkeit mehrere Navigationen nutzen.
Selektoren `[data-tk-nav-close="$ID"]`	Beschreibung Der Button zum Schliessen der Navigation. Die Id ist immer die Menu-ID die man der G-Funktion übergibt. Somit hat man die Möglichkeit mehrere Navigationen nutzen.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-open-class-name`	TypeScript-Type string	Default `viewport__navigation--open`	Beschreibung Der Modifier um die Navigation zu öffnen.
Data-Attribut `data-tk-current-menu-id`	TypeScript-Type string	Default undefined	Beschreibung Die aktuelle Menu-ID. Wird gebraucht um für die Mobileansicht, den ersten Request zu tätigen.
Data-Attribut `data-tk-has-children-class-name`	TypeScript-Type string	Default `tk-nav-burger-item--has-children`	Beschreibung Um zu prüfen ob gewisse Elemente noch Untermenüs besitzen. Wird für die Mobileansicht gebraucht.
Data-Attribut `data-tk-nav-async-template-name`	TypeScript-Type string	Default tk-navigation-burgerlist	Beschreibung Das Template für den Asynchronen Request für die Mobileansicht.
Data-Attribut `data-tk-desktop-min-width`	TypeScript-Type number	Default 1200	Beschreibung Ab welcher Viewport-Breite sollte zu der Desktopansicht gewechselt werden.

Search

Typeahead


default	default Artikel Marke Artikel-Titel Info/Detail CHF 80.00 Marke Artikel-Titel Info/Detail CHF 80.00 Weitere Ergebnisse Kategorien Liste Item Liste Item Liste Item Liste Item Weitere Ergebnisse	default Artikel Marke Artikel-Titel Info/Detail CHF 80.00 Marke Artikel-Titel Info/Detail CHF 80.00 Weitere Ergebnisse Kategorien Liste Item Liste Item Liste Item Liste Item Weitere Ergebnisse
loading	default	default
Info	default Für eine Suche sind mind. %1 Zeichen notwendig	default Für eine Suche sind mind. %1 Zeichen notwendig
No Results	default Mit dem Suchbegriff "" konnten leider keine Treffer gefunden werden.	default Mit dem Suchbegriff "" konnten leider keine Treffer gefunden werden.

Grösse L


default
selected	Artikel Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Kategorien Liste Item Liste Item Liste Item Liste Item	Artikel Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Kategorien Liste Item Liste Item Liste Item Liste Item

Grösse S


default
selected	Artikel Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Kategorien Liste Item Liste Item Liste Item Liste Item	Artikel Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Aktion Marke Artikel-Titel Info / Details CHF 80.00 CHF 75.00 Kategorien Liste Item Liste Item Liste Item Liste Item

Web Component <tk-search>

.tk-search__button-dropdown: Anzeige der Filterkategorien innerhalb des Suchfeldes anzeigen. Dabei wird auch der Modifier .tk-search__actions--suffix als Wrapper benötigt.

.tk-search--active: Wird gesetzt wenn die Direktsuche offen ist / den Fokus erhält.
.tk-search__button--back: CSS-Klasse für die Darstellung des Zurück-Buttons. Dabei wird auch der Modifier .tk-search__actions--prefix als Wrapper benötigt.
.tk-search__button--reset: CSS-Klasse für die Darstellung des Reset-Buttons. Dabei wird auch der Modifier .tk-search__actions--suffix als Wrapper benötigt.
.tk-search__button--submit: CSS-Klasse für die Darstellung des Submit-Buttons. Dabei wird auch der Modifier .tk-search__actions--suffix als Wrapper benötigt.
.tk-search--has-data: Wird für die korrekte Darstellung der Suchresultate abhängig der Bildschirmauflösung angezeigt.
.tk-search__result--section[1..6]: CSS-Klasse für die Kennzeichnung / Visualisierung der konfigurierten Sections der Direktsuche.

[data-tk-search]: Initialisierung des Suchformulares & Interaktionen
[data-tk-search-back]: Selektor für den zurück Button.
[data-tk-search-reset]: Selektor für den reset Button.
[data-tk-search-submit]: Selektor für den senden Button.
[data-tk-search-filter]: Ausprägung für das Filterkriterium innerhalb des Suchfeldes.
[data-tk-search-result]: Das Suchresultat der Direktsuche wird als Kindelement dieses Selektors dargestellt.

data-tk-search-min-input-length: Definition der Anzahl Zeichen bis der asynchrone Request ausgeführt wird.
data-tk-search-filter-attribute: OXAS Attribut für die Filterdefinition.

List

Default

Title

Label
Label
Label
Label

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-list__titles`	Beschreibung Wrapper für Titel sowie Untertitel.

Definitionlist

Main Title

Subtitle

Title Definitionlist: Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ipsam ullam quasi eos modi atque harum officia itaque, dignissimos corrupti iste molestiae cupiditate consequuntur quam excepturi nisi provident voluptatum quisquam?
Title Definitionlist: Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ipsam ullam quasi eos modi atque harum officia itaque, dignissimos corrupti iste molestiae cupiditate consequuntur quam excepturi nisi provident voluptatum quisquam?
Title Definitionlist: Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ipsam ullam quasi eos modi atque harum officia itaque, dignissimos corrupti iste molestiae cupiditate consequuntur quam excepturi nisi provident voluptatum quisquam?

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-list__dl`	Beschreibung Wrapper für das Styling einer Definitions-Liste.
Elemente (BEM) `.tk-list__titles`	Beschreibung Wrapper für Titel sowie Untertitel.

Unorderedlist

Title

Label
- Label
  - Label
Label
Label
- Label
Label

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-list__ul`	Beschreibung Wrapper für das Styling einer ul-Liste.
Elemente (BEM) `.tk-list__titles`	Beschreibung Wrapper für Titel sowie Untertitel.

Orderedlist

Title

Label
Label
1. Label
2. Label
  1. Label
  2. Label
Label

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-list__ol`	Beschreibung Wrapper für das Styling einer ol-Liste.
Elemente (BEM) `.tk-list__titles`	Beschreibung Wrapper für Titel sowie Untertitel.

Flags

	Label	Icon & Label	Icon
Neu	Label - Neu Aktuell	Icon & Label - Neu Aktuell	Icon - Neu Aktuell
Aktion	Label - Aktion Aktion	Icon & Label - Aktion Aktion	Icon - Aktion Aktion
Topseller	Label - Topseller Topseller	Icon & Label - Topseller Topseller	Icon - Topseller Topseller
2 Flags	Label - 2 Flags Aktuell Aktion	Icon & Label - 2 Flags Aktuell Aktion	Icon - 2 Flags Aktuell Aktion
3 Flags	Label - 3 Flags Topseller Aktuell Aktion	Icon & Label - 3 Flags Topseller Aktuell Aktion	Icon - 3 Flags Topseller Aktuell Aktion

Web Component <tk-flags>

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-flag__item`	Beschreibung Einzelnes Flag-Item
Elemente (BEM) `.tk-flag__icon`	Beschreibung Wrapper für Flag-Icon.
Elemente (BEM) `.tk-flag__label`	Beschreibung Wrapper für Label.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-flag--only-label`	Beschreibung Anzeige der Flags nur mit Label.
Modifier's (BEM) `.tk-flag--only-icon`	Beschreibung Anzeige der Flags nur mit Icon.
Modifier's (BEM) `.tk-flag__item--summarized`	Beschreibung Wird für die zusammengesetzten Flags verwendet. (+1 / +2)

Selektoren	Beschreibung
Selektoren `[data-tk-flag-item]`	Beschreibung Query-Selektor für die Flag Nodelist.
Selektoren `[data-tk-flag-icon]`	Beschreibung Mit diesem Selektor wird das Icon für die Tooltips ausgelesen
Selektoren `[data-tk-flag-label]`	Beschreibung Mit diesem Selektor wird das Label für die Tooltips ausgelesen
Selektoren `[data-tk-flag-merged]`	Beschreibung Selektor für das Template-Element des Tooltips innerhalb der Flags


Code	Code

Tooltips

Tooltip

Position
auto	auto Lorem, ipsum dolor sit amet consectetur adipisicing elit.
auto-start	auto-start Lorem, ipsum dolor sit amet consectetur adipisicing elit.
auto-end	auto-end Lorem, ipsum dolor sit amet consectetur adipisicing elit.
top	top Lorem, ipsum dolor sit amet consectetur adipisicing elit.
right	right Lorem, ipsum dolor sit amet consectetur adipisicing elit.
bottom	bottom Lorem, ipsum dolor sit amet consectetur adipisicing elit.
left	left Lorem, ipsum dolor sit amet consectetur adipisicing elit.

Web Component <tk-tooltip>

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-tooltip--hide-marker`	Beschreibung Markierung für den Tooltiptext unterdrücken.

Data-Attribut TypeScript-Type Default Beschreibung

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-tooltip-content`	TypeScript-Type string	Default -	Beschreibung Inhalt des Tooltips. HTML-Content ist erlaubt.
Data-Attribut `data-tk-tooltip-options`	TypeScript-Type string	Default -	Beschreibung Projektspezifische Optionen für das Tooltip. JSON-String für alle möglichen Properties zur Individualisierung sind auf Github dokumentiert.

Data-Attribut data-tk-tooltip-content

TypeScript-Type

string

Default

-

Beschreibung

Inhalt des Tooltips. HTML-Content ist erlaubt.

Data-Attribut data-tk-tooltip-options

TypeScript-Type

string

Default

-

Beschreibung

Projektspezifische Optionen für das Tooltip.

JSON-String für alle möglichen Properties zur Individualisierung sind auf Github dokumentiert.


Code	Code

Status

	Icon & Label	Icon
# bezahlt	Icon & Label - bezahlt Bezahlt	Icon - bezahlt
# offen	Icon & Label - offen Offen	Icon - offen

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-status__icon`	Beschreibung Wrapper für Icon.
Elemente (BEM) `.tk-status__label`	Beschreibung Wrapper für Label.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-status--paid`	Beschreibung Sorgt dafür, dass das Icon mit einem grünen Hintergrund dargestellt wird. Die Schrift ist weiss.
Modifier's (BEM) `.tk-status--unpaid`	Beschreibung Sorgt dafür, dass das Icon mit einem gelben Hintergrund dargestellt wird. Die Schrift ist schwarz.

	Code
Label	Icon & Label - Code
Icon only	Icon - Code

Stock

	Icon & Label	Icon
# default (on-stock)	Icon & Label - default (on-stock) Verfügbar	Icon - default (on-stock)
# less (less-stock)	Icon & Label - less (less-stock) Wenig verfügbar	Icon - less (less-stock)
# empty (out-stock)	Icon & Label - empty (out-stock) Nicht verfügbar	Icon - empty (out-stock)
# not available (na-stock)	Icon & Label - not available (na-stock) Keine Lagerinformationen	Icon - not available (na-stock)
# call (call-stock)	Icon & Label - call (call-stock) Auf Anfrage	Icon - call (call-stock)

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-stock__icon`	Beschreibung Wrapper für Icon.
Elemente (BEM) `.tk-stock__label`	Beschreibung Wrapper für Label.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-stock--on-stock`	Beschreibung Sorgt dafür, dass das Icon mit einem grünen Hintergrund dargestellt wird. Die Schrift ist weiss.
Modifier's (BEM) `.tk-stock--less-stock`	Beschreibung Sorgt dafür, dass das Icon mit einem gelben Hintergrund dargestellt wird. Die Schrift ist schwarz.
Modifier's (BEM) `.tk-stock--out-stock`	Beschreibung Sorgt dafür, dass das Icon mit einem rotem Hintergrund dargestellt wird. Die Schrift ist weiss.
Modifier's (BEM) `.tk-stock--na-stock`	Beschreibung Sorgt dafür, dass das Icon mit einem rotem Hintergrund dargestellt wird. Die Schrift ist weiss.
Modifier's (BEM) `.tk-stock--call-stock`	Beschreibung Sorgt dafür, dass das Icon mit einem blauen Hintergrund dargestellt wird. Die Schrift ist weiss.

	Code
Icon & Label	Icon & Label - Code
Icon only	Icon - Code

Progress

Progress-Bar

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-progress__bar`	Beschreibung Fortschritt-Leiste

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-progress--infinite`	Beschreibung Animation der Fortschrittsleiste in einer Endlosschleife.
Modifier's (BEM) `.tk-progress--breakout`	Beschreibung Ladeanimation ignoriert die Grid-Definition und nimmt den maximal verfügbaren Platz ein.

	Code
Infinite	Infinite - Code

Carousel

Carousel / Slider

Data-Attribut TypeScript-Type Default Beschreibung

Data-Attribut data-tk-carousel-options

TypeScript-Type

string

Default

-

Beschreibung

Die Optionen, welche dem Carousel mitgegeben werden können.

Option	TypeScript-Type	Default	Beschreibung
Option `[3rd-Party Option]`	TypeScript-Type -	Default -	Beschreibung Die Optionen sind auf der 3rd-Party-Seite von splidejs.com dokumentiert.
Option `hasOverlayPagination`	TypeScript-Type boolean	Default false	Beschreibung Falls die Carousel-Navigation als Overlay dargestellt werden soll, muss diese Option auf `true` gesetzt werden

Data-Attribut data-tk-overlay-class-name

TypeScript-Type

string

Default tk-carousel__arrows--overlay

Beschreibung

CSS-Klasse für die Overlay Variante des Paging

Selektoren	Beschreibung
Selektoren `[data-tk-carousel-origin]`	Beschreibung Das Wrapper-Element, welches die einzelnen Slides umschliesst.
Selektoren `[data-tk-carousel-title]`	Beschreibung Optionales Titel-Element. Wenn vorhanden, wird dieses Element 1:1 vor dem Carousel gerendert.
Selektoren `[data-tk-carousel-slide]`	Beschreibung Selektor für die identifizierung einer einzelnen Slide.
Selektoren `[data-tk-slider-template]`	Beschreibung Selektor für das Template, welches als Basis für das Carousel verwendet wird.
Selektoren `[data-tk-carousel]`	Beschreibung Auf diesem Selektor wird das Binding sowie das Error-Handling für das Carousel initialisiert.
Selektoren `[data-tk-slider-list]`	Beschreibung Wrapper-Element für die einzelnen Items des Carousels.

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-carousel__track`	Beschreibung Container für das Carousel
Elemente (BEM) `.tk-carousel__arrows`	Beschreibung Wrapper-Element für die Pfeil-Navigation
Elemente (BEM) `.tk-carousel__arrow`	Beschreibung Pfeil-Element
Elemente (BEM) `.tk-carousel__pagination`	Beschreibung Wrapper-Element für die Punkt-Navigation
Elemente (BEM) `.tk-carousel__pagination-page`	Beschreibung Style-Class für einzelnes Page-Element (Punkt)

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-carousel__arrows--overlay`	Beschreibung Paging des Carousel als Overlay darstellen
Modifier's (BEM) `.tk-carousel__arrow--prev`	Beschreibung Pfeil "zurück"
Modifier's (BEM) `.tk-carousel__arrow--next`	Beschreibung Pfeil "vorwärts"

Brand

	Logo	Link disabled
# default	default Hewlett-Packard	default Hewlett-Packard
# hover	hover Hewlett-Packard	hover Hewlett-Packard
# pressed	pressed Hewlett-Packard	pressed Hewlett-Packard

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-brand__logo`	Beschreibung CSS-Klasse für den Logo-Wrapper.
Elemente (BEM) `.tk-brand__Label`	Beschreibung Wrapper für Label.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-brand--only-logo`	Beschreibung Sorgt dafür, Dass das Label nicht angezeigt wird.
Modifier's (BEM) `.tk-brand--link-disabled`	Beschreibung Deaktivierung des Link auf dem Anker - Tag.

Brand-Slider

Beliebte Marken

alle anzeigen

Dialog

Example

Web Components <tk-dialog>

Selektoren	Beschreibung
Selektoren `[data-tk-dialog-content]`	Beschreibung Das Wrapper-Element, indem der Inhalt asynchron reingeladen wird.
Selektoren `[data-tk-dialog-close]`	Beschreibung Das Element, dass das Dialog schliesst.
Selektoren `[data-tk-dialog-jump-forward]`	Beschreibung Das Element, dass das nächste Dialog öffnet. Braucht zusätzlich `data-tk-url` um den Inhalt zu holen des OC's.
Selektoren `[data-tk-dialog-jump-backward]`	Beschreibung Das Element, dass das vorherige Dialog öffnet.
Selektoren `[data-tk-switch-to-next]`	Beschreibung Dieses Attribut wird am `HTMLFormElement` angebunden. Durch das `action` Attribut wird der nächste OC geholt.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-url`	TypeScript-Type string	Default -	Beschreibung Hier kann die URL die per `gCreateURL` generiert wird und auf das gewünschte OC zeigt angeben.
Data-Attribut `data-tk-open`	TypeScript-Type boolean	Default false	Beschreibung Wenn dieses Data-Attribut gesetzt wird, dann öffnet sich das Dialog automatisch.
Data-Attribut `data-tk-dialog-class-name`	TypeScript-Type string	Default `tk-dialog`	Beschreibung Der Block des Dialogs.
Data-Attribut `data-tk-dialog-inner-class-name`	TypeScript-Type string	Default `tk-dialog__inner`	Beschreibung Der Wrapper für den Dialog-Inhalt.
Data-Attribut `data-tk-dialog-close-class-name`	TypeScript-Type string	Default `tk-button tk-button--tertiary tk-button--only-icon tk-dialog__close`	Beschreibung Die Styling-Klassen des Close Buttons, dass immer mit generiert wird.

Asset

Asset Gallery Item

Status		more
default	default	default
hover	hover	hover
pressed	pressed	pressed
disabled	disabled	disabled
selected	selected

Asset Gallery

Asset Gallery (vertical)

Web Components <kw-asset-gallery>

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-header--fullscreen`	Beschreibung Wechselt zur Fullscreen Ansicht

Selektoren	Element
Selektoren `[data-tk-close-fullscreen]`	Element Das Element, dass beim Klicken die Fullscreen Ansicht schliesst.
Selektoren `[data-tk-asset-preview]`	Element Der Wrapper, der Preview-Bilder.
Selektoren `[data-tk-asset-thumbnails]`	Element Die Auflistung der Thumbnails.
Selektoren `[data-tk-iframe-template]`	Element Das Template für das iFrame, falls Videos genutzt werden.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-overlay-class-name`	TypeScript-Type string	Default `.tk-asset-gallery.tk-asset-gallery--fullscreen`	Beschreibung Das Overlay für die Fullscreen-Ansicht. Wird ausserhalb der Viewports gesetzt.
Data-Attribut `data-tk-max-showing-thumbnails`	TypeScript-Type MaxShowingThumbnails ('auto' \| number)	Default auto	Beschreibung Mit diesem Wert bestimmt man wieviele Thumbnails angezeigt werden sollen. Wenn man den Default-Wert auto lässt, wird ständig nach dem Optimum je nach Container-Grösse angepasst.
Data-Attribut `data-tk-video-url`	TypeScript-Type string	Default undefined	Beschreibung Kann auf dem jeweiligen li-Item gesetzt werden im Preview-Wrapper. Siehe Beispiel oben.

Article

Artikelkachel

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-article__flags`	Beschreibung Wrapper für die Anzeige der Flags
Elemente (BEM) `.tk-article__media`	Beschreibung Wrapper für die Anzeige der Medien. Im Wrapper wird der Image-Tag eingebunden.
Elemente (BEM) `.tk-article__title`	Beschreibung Wrapper für die Anzeige des Titels.
Elemente (BEM) `.tk-article__stock`	Beschreibung Wrapper für die Anzeige der Verfügbarkeit
Elemente (BEM) `.tk-article__actions`	Beschreibung Wrapper für die Anzeige aller Aktionen, wie der Warenkorb-Button, Favorite-Button, Compare-Button usw. Der Action Wrapper wird als Grid dargestellt und behinhaltet andere Elemente (more, basket, prices, ...).
Elemente (BEM) `.tk-article__additional`	Beschreibung Wrapper für die Anzeige des Input-Field. Wird in der G-Funktion `{gGetBasketButton()}` genutzt und ausgegeben.
Elemente (BEM) `.tk-article__prices`	Beschreibung Wrapper für die Anzeige des Preises.
Elemente (BEM) `.tk-article__more`	Beschreibung Wrapper für die Anzeige des Favorite und Compare-Buttons.
Elemente (BEM) `.tk-article__basket`	Beschreibung Wrapper-Element der G-Funktion `{gGetBasketButton()}`.
Elemente (BEM) `.tk-article__basket-button`	Beschreibung Button-Element des Basket Button der G-Funktion `{gGetBasketButton()}`.
Elemente (BEM) `.tk-article__remove`	Beschreibung Wrapper-Element des Basket Button der G-Funktion `{gGetBasketButton(remove)}`.
Elemente (BEM) `.tk-article__link`	Beschreibung Das Anchor-Element. Wird als erstes Child im Block `.tk-article` eingesetzt. Der Link wird als `position: absolute;` auf die ganze Breite und Höhe dargestellt. Mit den verschiedenen Z-Indizes wird damit verhindert, das die Button und Input-Elemente vor dem Link dargestellt werden.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-article--multi-dim`	Beschreibung Ändert die Artikelkachel zur Ansicht für die Multidimensionen. Es wird keine additional-Area angezeigt.
Modifier's (BEM) `.tk-article--modal`	Beschreibung Ändert die Artikelkachel zur Ansicht für die Modal-Anzeige. Alle Pseudo-Klassen werden unterdrückt.
Modifier's (BEM) `.tk-article__media--with-padding`	Beschreibung Sorgt dafür, dass um das Artikelbild ein padding eingeblendet wird.

Artikelkachel - Mehrere Dimensionen

Status
default	default Topseller Aktuell Aktion Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
hover	hover Topseller Aktuell Aktion Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
pressed	pressed Topseller Aktuell Aktion Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000

Artikelkachel - Eindimensional

Status
default	default Aktuell Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
hover	hover Aktuell Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
pressed	pressed Aktuell Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000

Artikelliste - Mehrere Dimensionen

Status
default	default Topseller Aktuell Aktion Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
hover	hover Topseller Aktuell Aktion Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
pressed	pressed Topseller Aktuell Aktion Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000

Artikelliste - Eindimensional

Status
default	default Aktuell Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
hover	hover Aktuell Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000
pressed	pressed Aktuell Marke Artikel Titel Verfügbar CHF 18'000 CHF 15'000

Artikelliste

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-article-list--row`	Beschreibung Ändert die Artikelliste von der Kachelansicht zur Listenansicht (Row).

34 Artikel

Artikelslider

Aktuelles

Alle anzeigen

Warenkorbliste

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-article--basket-tile`	Beschreibung Wandelt die Artikelkachel zu einer Basket-Kachel. Der Modifier wird auf der Artikel-Kachel getan.

Status
default	default Marke Artikel Titel CHF 18'000 CHF 15'000 Stk Stück Stück
hover	hover Marke Artikel Titel CHF 18'000 CHF 15'000 Stk Stück Stück
pressed	pressed Marke Artikel Titel CHF 18'000 CHF 15'000 Stk Stück Stück

Minibasket

Status
default	default Elco Ordner Versandbox (30cm x 18cm) 70.00 Stk. 120.00
hover	hover Elco Ordner Versandbox (30cm x 18cm) 70.00 Stk. 120.00
pressed	pressed Elco Ordner Versandbox (30cm x 18cm) 70.00 Stk. 120.00

Status
empty	empty Warenkorb Es sind keine Artikel vorhanden. Zum Warenkorb
items	items Warenkorb Elco Ordner Versandbox (30cm x 18cm) 70.00 Stk. 120.00 Total CHF 120.00 Zum Warenkorb
prototype	prototype Warenkorb Zum Warenkorb

Web Components <tk-minibasket>

Selektoren	Beschreibung
Selektoren `[data-tk-header-button]`	Beschreibung Der Button um den Minibasket zu öffnen.
Selektoren `[data-tk-minibasket-overlay]`	Beschreibung Der Wrapper des Dropdown-Menüs.
Selektoren `[data-tk-minibasket-items]`	Beschreibung Der Wrapper der Items. In diesem Wrapper werden alle Items der API reingeladen.
Selektoren `[data-tk-minibasket-amount]`	Beschreibung Auf diesem Element wird der Gesamtpreis reingeladen.

Custom Events	Beschreibung
Custom Event `tk-minibasket-opened`	Beschreibung Dieser Event wird ausgelöst wenn, der Minibasket geöffnet wurde.
Custom Event `tk-minibasket-update`	Beschreibung Dieser Event wird ausgelöst wenn, der Minibasket aktualisiert wurde.
Custom Event `tk-minibasket-closed`	Beschreibung Dieser Event wird ausgelöst wenn, der Minibasket geschlossen wurde.

Diese Events können mittels addEventListener() auf diese Web-Component subscribed werden.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-count-items-request-url`	TypeScript-Type string	Default -	Beschreibung Hier kann die URL die per `gCreateURL` generiert wird und auf die gewünschte API gezeigt werden. Default: (API.lc - Level 1) (Output: JSON) Beispiel Resultat: `{"quantity": 0}`
Data-Attribut `data-tk-get-content-request-url`	TypeScript-Type string	Default -	Beschreibung Hier kann die URL die per `gCreateURL` generiert wird und auf die gewünschte API gezeigt werden. Default: (API.lc - Level 2) (Output: HTML) Es wird das Markup erwartet der gewünschten Items.
Data-Attribut `data-tk-header-button-empty-class-name`	TypeScript-Type string	Default `tk-button__header--empty`	Beschreibung Die Klasse die auf den Header-Button gesetzt wird, wenn keine Items im Warenkorb existieren.
Data-Attribut `data-tk-minibasket-offset`	TypeScript-Type number	Default 4	Beschreibung Der Offset (Y-Achse) zwischen Header-Button und Overlay, der beim Öffnen des Minibasket gesetzt wird.
Data-Attribut `data-tk-open-class-name`	TypeScript-Type string	Default `tk-minibasket--open`	Beschreibung Die Klasse die gesetzt wird, beim Öffnen des Minibasket.
Data-Attribut `data-tk-event-opened-name`	TypeScript-Type string	Default `tk-minibasket-opened`	Beschreibung -
Data-Attribut `data-tk-event-update-name`	TypeScript-Type string	Default `tk-minibasket-update`	Beschreibung -
Data-Attribut `data-tk-event-closed-name`	TypeScript-Type string	Default `tk-minibasket-closed`	Beschreibung -

Product

Produktkachel

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-article__flags`	Beschreibung Wrapper für die Anzeige der Flags
Elemente (BEM) `.tk-article__media`	Beschreibung Wrapper für die Anzeige des Bildes. Im Wrapper wird der Image-Tag eingebunden.
Elemente (BEM) `.tk-article__title`	Beschreibung Wrapper für die Anzeige des Titels.
Elemente (BEM) `.tk-article__stock`	Beschreibung Wrapper für die Anzeige der Verfügbarkeit
Elemente (BEM) `.tk-article__actions`	Beschreibung Wrapper für die Anzeige aller Aktionen, wie der Warenkorb-Button, Favorite-Button, Compare-Button usw. Der Action Wrapper wird als Grid dargestellt und behinhaltet andere Elemente (more, basket, prices, ...).
Elemente (BEM) `.tk-article__additional`	Beschreibung Wrapper für die Anzeige des Input-Field. Wird in der G-Funktion `{gGetBasketButton()}` genutzt und ausgegeben.
Elemente (BEM) `.tk-article__prices`	Beschreibung Wrapper für die Anzeige des Preises.
Elemente (BEM) `.tk-article__more`	Beschreibung Wrapper für die Anzeige des Favorite und Compare-Buttons.
Elemente (BEM) `.tk-article__basket`	Beschreibung Wrapper-Element der G-Funktion `{gGetBasketButton()}`.
Elemente (BEM) `.tk-article__basket-button`	Beschreibung Button-Element des Basket Button der G-Funktion `{gGetBasketButton()}`.
Elemente (BEM) `.tk-article__remove`	Beschreibung Wrapper-Element des Basket Button der G-Funktion `{gGetBasketButton(remove)}`.
Elemente (BEM) `.tk-article__link`	Beschreibung Das Anchor-Element. Wird als erstes Child im Block `.tk-article` eingesetzt. Der Link wird als `position: absolute;` auf die ganze Breite und Höhe dargestellt. Mit den verschiedenen Z-Indizes wird damit verhindert, das die Button und Input-Elemente vor dem Link dargestellt werden.
Elemente (BEM) `.tk-article__product-special-wrapper`	Beschreibung Zusätzlicher Wrapper für das Element mit der Klasse .tk-article__product-special. Dieser Wrapper sorgt dafür, dass auf grossen Displays für das Dropdown eine max-width gesetzt wird. Ebenfalls wird damit sichergestellt, dass sich das Dropdown am rechten Rand seiner Grid-Area ausrichtet.
Elemente (BEM) `.tk-article__product-special`	Beschreibung Produktspezifisches Element zur Anzeige von zusätzlichen Informationen wie die Anzahl Produktvarianten oder Auswahl weiterer Produktvarianten.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-article--product`	Beschreibung Ändert die Produktekachel zur Ansicht eines Produktes. Der Warenkorbbutton startet in dieser Ansicht den Produkt-Varianten-Auswahl-Flow.
Modifier's (BEM) `.tk-article--product-art`	Beschreibung Ändert die Produktekachel zur Ansicht eines einzelnen Produktartikels. Diese erscheint in dem Produkt-Varianten-Auswahl-Flow nach der Auswahl einer Produkt-Variante.
Modifier's (BEM) `.tk-article--product-art-single-dim`	Beschreibung Ändert die Produktkachel zur Ansicht einer Produktkachel mit Produkartikel-Daten und einer Dimension. Die Auswahl einzelner Produkt-Varianten werden in einer Select-Box dargestellt.
Modifier's (BEM) `.tk-article--product-art-multi-dim`	Beschreibung Ändert die Produktkachel zur Ansicht einer Produktkachel mit Produkartikel-Daten und mehreren Dimension.
Modifier's (BEM) `.tk-article--product-variant`	Beschreibung Ändert die Produktkachel zur Ansicht einer Produkt-Variante mit definierten Differenzierungsattributen. Diese Ansicht erscheint im Produkte-Varianten-Auswahl-Flow
Modifier's (BEM) `.tk-article__media--with-padding`	Beschreibung Sorgt dafür, dass um das Artikelbild ein padding eingeblendet wird.

Produktkachel (Simple)

Status
default	default 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000
hover	hover 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000
pressed	pressed 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000

Produktkachel mit Produktartikel-Daten und mehreren Dimensionen

Status
default	default 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000
hover	hover 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000
pressed	pressed 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000

Produktkachel mit Produkartikel-Daten und einer Dimension

Status
default	default CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000
hover	hover CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000
pressed	pressed CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000

Produkteliste (Simpel)

Status
default	default 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000
hover	hover 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000
pressed	pressed 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000
default	default 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000
hover	hover 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000
pressed	pressed 20 Varianten erhältlich ab CHF 18'000 Aktion 20 Varianten erhältlich ab CHF 18'000 Topseller Aktuell Aktion 20 Varianten erhältlich ab CHF 18'000

Produkteliste mit Produktartikel-Daten und mehreren Dimensionen

Status
default	default 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000
hover	hover 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000
pressed	pressed 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000
default	default 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000
hover	hover 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000
pressed	pressed 20 Varianten erhältlich CHF 18'000 CHF 15'000 Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000 Topseller Aktuell Aktion 20 Varianten erhältlich CHF 18'000 CHF 15'000

Produkteliste mit Produkartikel-Daten und einer Dimension

Status
default	default CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000
hover	hover CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000
pressed	pressed CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000
default	default CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000
hover	hover CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000
pressed	pressed CHF 18'000 CHF 15'000 Verfügbar CHF 18'000 CHF 15'000 Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion CHF 18'000 CHF 15'000 Topseller Aktuell Aktion Verfügbar CHF 18'000 CHF 15'000

Produkteliste


	34 Artikel CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000
	34 Artikel CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000

Produkteslider


	Aktuelles Alle anzeigen CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000 CHF 18'000 CHF 15'000

Web Components <tk-product-tile>

Selektoren	Beschreibung
Selektoren `[data-tk-product-tile-switch-variant]`	Beschreibung Selct-Box mit Auswahl von Artikeln zum Produkt. Beim ändern wird ein neues Product-Tile geladen.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-product-tile-switch-variant`	TypeScript-Type string	Default -	Beschreibung Hier kann die URL die per `gCreateURL` generiert wird und ddas gewünschte Product-Tile ermittelt.

Web Components <tk-product-variants>

Selektoren	Beschreibung
Selektoren `[data-tk-product-variant]`	Beschreibung Wrapper der gesamten Produkt-Variante in der Auswahlliste.
Selektoren `[data-tk-product-variant-filter]`	Beschreibung Wrapper eines Differenzierungsattributes zum Filtern der Auswahlliste
Selektoren `[data-tk-product-variant-list]`	Beschreibung Wrapper der Produkt-Varianten Liste.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-product-variant-none`	TypeScript-Type string	Default NONE	Beschreibung Product-Variant Value falls nach dem Filtern keine Produkt-Varianten vorhanden sind.
Data-Attribut `data-tk-product-variant`	TypeScript-Type string	Default -	Beschreibung Wert der ID der Produkt-Variante.
Data-Attribut `data-tk-product-variant-filter`	TypeScript-Type string	Default -	Beschreibung Name des Differenzierungsattributes zum Filtern der Produkt-Varianten Liste
Data-Attribut `data-tk-product-variant-attribute`	TypeScript-Type string	Default -	Beschreibung Name des Differenzierungsattributes innerhalb der Produkt-Variante.
Data-Attribut `data-tk-product-variant-value`	TypeScript-Type string	Default -	Beschreibung Wert des Differenzierungsattributes innerhalb der Produkt-Variante.

Messages


# Success	Success Die Email wurde versendet
# Error	Error Die Email wurde nicht versendet
# Info	Info Die Email wurde versendet
# Warning	Warning Die Email wurde versendet

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-message__icon`	Beschreibung Wrapper für Icon.
Elemente (BEM) `.tk-message__label`	Beschreibung Wrapper für Label.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-message--success`	Beschreibung Sorgt dafür, dass die Meldung mit einem grünen Hintergrund dargestellt wird. Die Schrift ist weiss.
Modifier's (BEM) `.tk-message--error`	Beschreibung Sorgt dafür, dass die Meldung mit einem roten Hintergrund dargestellt wird. Die Schrift ist weiss.
Modifier's (BEM) `.tk-message--info`	Beschreibung Sorgt dafür, dass die Meldung mit einem blauen Hintergrund dargestellt wird. Die Schrift ist weiss.
Modifier's (BEM) `.tk-status--warning`	Beschreibung Sorgt dafür, dass die Meldung mit einem gelben Hintergrund dargestellt wird. Die Schrift ist schwarz.
Modifier's (BEM) `.tk-status--fullwidth`	Beschreibung Sorgt dafür, dass die Meldung den maximal verfügbaren Platz einnimmt.
Modifier's (BEM) `.tk-status--breakout`	Beschreibung Sorgt dafür, dass die Meldung aus der Grid-Definition ausbricht und den maximal verfügbaren Platz einnimmt.

Show More

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Web Component <tk-show-more>

Elemente (BEM)	Beschreibung
Elemente (BEM) `.tk-show-more__content`	Beschreibung Der Wrapper für den Content
Elemente (BEM) `.tk-flag__actions`	Beschreibung Der Wrapper für die Aktionen wie Buttons
Elemente (BEM) `.tk-flag__expand`	Beschreibung Der Button der zum Erweitern zuständig ist.
Elemente (BEM) `.tk-flag__fold`	Beschreibung Der Button der zum Minimieren zuständig ist.

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-flag--open`	Beschreibung Öffnen des Contents
Modifier's (BEM) `.tk-flag--disable`	Beschreibung Anzeige des Contents ohne Action Area.

Selektoren	Beschreibung
Selektoren `[data-tk-content]`	Beschreibung Dieser Selektor bestimmt den Wrapper des Content.
Selektoren `[data-tk-expand-button]`	Beschreibung Dieser Selektor bestimmt den Button für das Öffnen des Content.
Selektoren `[data-tk-fold-button]`	Beschreibung Dieser Selektor bestimmt den Button für das Schliessen des Content.

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-showing-elements`	TypeScript-Type number	Default 1	Beschreibung Hier kann man die Anzahl Elemente einstellen die bei Initialisierung angezeigt werden sollen. Falls der Content die Anzahl nicht erreicht, werden die Button's nicht angezeigt.

Quick Order

Example

Wählen/Menge

Hoch

Runter

Schliessen

Web Components <tk-quick-order>

Data-Attribut	TypeScript-Type	Default	Beschreibung
Data-Attribut `data-tk-url`	TypeScript-Type string	Default undefined	Beschreibung Hier wird die Schnittstelle angegeben per `{gCreateURL()}`. Der Response-Type muss `text/html` sein.
Data-Attribut `data-tk-active-class-name`	TypeScript-Type string	Default `tk-search--active`	Beschreibung Hier kann eine CSS-Klasse angegeben werden. Die Klasse wird hinzugefügt, wenn das Inputfeld active (focus) ist.
Data-Attribut `data-tk-has-data-class-name`	TypeScript-Type string	Default `tk-search--has-data`	Beschreibung Hier kann eine CSS-Klasse angegeben werden. Die Klasse wird hinzugefügt, wenn der Request beim Suchen einen Response erhält.
Data-Attribut `data-tk-loading-class-name`	TypeScript-Type string	Default `tk-search--loading`	Beschreibung Hier kann eine CSS-Klasse angegeben werden. Die Klasse wird hinzugefügt, wenn der Request abgeschickt wird und wird entfernt wenn der Request einen gültigen Response zurückerhält.
Data-Attribut `data-tk-choose-keybind`	TypeScript-Type string	Default Enter	Beschreibung Hier kann ein Keybind definiert werden, um ein Artikel zu fokusieren bzw. zum Inputfeld zu springen.
Data-Attribut `data-tk-navigate-up-keybind`	TypeScript-Type string	Default ArrowUp	Beschreibung Hier kann ein Keybind definiert werden, um im Dropdown nach oben zu navigieren.
Data-Attribut `data-tk-navigate-down-keybind`	TypeScript-Type string	Default ArrowDown	Beschreibung Hier kann ein Keybind definiert werden, um im Dropdown nach unten zu navigieren.
Data-Attribut `data-tk-choose-quantity-keybind`	TypeScript-Type string	Default Enter	Beschreibung Hier kann ein Keybind definiert werden, um die Anzahl Stück in den Warenkorb hinzuzufügen.
Data-Attribut `data-tk-close-keybind`	TypeScript-Type string	Default Escape	Beschreibung Hier kann ein Keybind definiert werden, um das Dropdown zu schliessen.

Custom

Referenzkachel

Status
default	default Wankdorf BE Projekt-Nr: 321456987 Admin: Otis Schmid Status Aktiv Aktiv seit 01.05.2022 Bestellungen Offerten Rückstände Rechnungen Gutschriften Retouren Merklisten Team
hover	hover Wankdorf BE Projekt-Nr: 321456987 Admin: Otis Schmid Status Aktiv Aktiv seit 01.05.2022 Bestellungen Offerten Rückstände Rechnungen Gutschriften Retouren Merklisten Team
pressed	pressed Wankdorf BE Projekt-Nr: 321456987 Admin: Otis Schmid Status Aktiv Aktiv seit 01.05.2022 Bestellungen Offerten Rückstände Rechnungen Gutschriften Retouren Merklisten Team

	Filter not active	Filter active
default default	default	default
hover hover	hover	hover
pressed pressed	pressed	pressed
disabled disabled	disabled	disabled


Mit Suche Mit Suche	Mit Suche Label Label Label Label
Ohne Suche Ohne Suche	Ohne Suche Label Label Label Label


Mit Suche Mit Suche	Mit Suche Frühlung Sommer Herbst Winter
Ohne Suche Ohne Suche	Ohne Suche Frühling Sommer Herbst Winter


Mit Suche Mit Suche	Mit Suche Gross Medium gross Klein Sehr klein
Ohne Suche Ohne Suche	Ohne Suche Gross Medium gross Klein Sehr klein

Modifier's (BEM)	Beschreibung
Modifier's (BEM) `.tk-filter-select--has-colors`	Beschreibung Wechselt die Reihenfolge des Formfield und zeigt einen Platzhalter an für die Farbe. Dieser Modifier wird automatisch im Razor-Template gesetzt, sobald der Value einen gültigen Hexcode hat.


Mit Suche Mit Suche	Mit Suche Turquoise Lavender Crimson Emerald Azure Magenta Ruby Teal
Ohne Suche Ohne Suche	Turquoise Lavender Crimson Emerald Azure Magenta Ruby Teal

Event	Beschreibung
Event `STARTED`	Beschreibung Schiesst, wenn der TK-Filter im DOM geladen wurde.
Event `SENDED`	Beschreibung Schiesst, wenn ein `post()` ausgelöst wurde.
Event `REFRESHED`	Beschreibung Schiesst, wenn die Artikel-Liste erfolgreich neu geladen wurde.
Event `RESETTED`	Beschreibung Schiesst, wenn alle selektierten Filter zurückgesetzt wurden.
Event `ENDED`	Beschreibung Schiesst, wenn der TK-Filter aus dem DOM gelöscht wurde.

Selektor	Beschreibung
Selektor `[data-tk-filter-drilldown-button-count]`	Beschreibung Das Counter Element um die aktiver Filteranzahl einzutragen.

Components

Table

Header

Footer

Navigation

Search

List

Flags

Tooltips

Status

Stock

Progress

Carousel

Brand

Beliebte Marken

Dialog

Asset

Article

Aktuelles

Product

Aktuelles

Messages

Filter

Show More

Quick Order

Custom

Sie wurden wegen Inaktivität abgemeldet.