Examples
Default styling
Headline
Name
John Doe
John Doe
E-Mail
info@dc.ag
info@dc.ag
.accountBox--new
New
Headline
Name
John Doe
John Doe
E-Mail
info@dc.ag
info@dc.ag
Markup
<div class="accountBox [modifier class]">
<div class="accountBox__header">
<div class="accountBox__headline">
<i class="icon icon-user"></i>
Headline
</div>
<div class="accountBox__actions">
<a href="#" class="actionIcon" title="">
<i class="icon icon-edit"></i>
</a>
</div>
</div>
<div class="accountBox__content">
<div class="marginBottom"><small>Name</small><br>John Doe</div>
<div class="marginBottom"><small>E-Mail</small><br>info@dc.ag</div>
</div>
<div class="accountBox__footer">
<div class="accountBox__footerLeft">
<button><i class="icon icon-delete"></i>Delete</button>
</div>
</div>
</div>
<div class="accountBox">
<div class="accountBox__header">
<div class="accountBox__headline">
<i class="icon icon-user"></i>
Headline
</div>
<div class="accountBox__headerButton">
<a href="#" title="">
Show All
</a>
</div>
</div>
<div class="accountBox__content">
<div class="marginBottom"><small>Name</small><br>John Doe</div>
<div class="marginBottom"><small>E-Mail</small><br>info@dc.ag</div>
</div>
</div>
Source:
build/doc/doc.css, line 18711
Example
Zwischensumme:
0,00 €
Versand:
0,00 €
Gutschein
Code
2,00 €
Markup
<div class="amountLines">
<div class="amountLine">
<div class="amountLine__label">
Zwischensumme:
</div>
<div class="amountLine__value">
0,00 €
</div>
</div>
<div class="amountLine">
<div class="amountLine__label">
Versand:
</div>
<div class="amountLine__value">
0,00 €
</div>
</div>
<div class="amountLine amountLine--big">
<div class="amountLine__label">
Gutschein
<span class="tag">Code<i class="icon icon-close"></i></span>
</div>
<div class="amountLine__value">
2,00 €
</div>
</div>
</div>
Source:
build/doc/doc.css, line 17303
Example
Markup
<div class="attributesIcons">
<div class="attributesIcons__img image">
<img src="kss-assets/sample.png" alt="" width="70px" height="70px">
</div>
<div class="attributesIcons__img image">
<img src="kss-assets/sample.png" alt="" width="70px" height="70px">
</div>
</div>
Source:
build/doc/doc.css, line 18235
Example
Markup
<div class="categoryList">
<div class="row gridGap--small">
<div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
<a href="#" class="categoryBox">
<div class="categoryItem__headline">Categoryname</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
<a href="#" class="categoryBox">
<div class="categoryItem__headline">Categoryname</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 marginBottom">
<a href="#" class="categoryBox">
<div class="categoryItem__headline">Categoryname</div>
</a>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 16613
Example
Markup
<div class="categoryList">
<div class="row row--flexsub gridGap--small">
<div class="col-6 col-md-4 marginBottom">
<a href="#" class="categoryItem">
<div class="categoryItem__image imageCover">
<img src="kss-assets/sample.png" alt="Categoryname">
</div>
<div class="categoryItem__content">
<div class="categoryItem__headline">Categoryname</div>
</div>
</a>
</div>
<div class="col-6 col-md-4 marginBottom">
<a href="#" class="categoryItem">
<div class="categoryItem__image imageCover">
<img src="kss-assets/sample.png" alt="Categoryname">
</div>
<div class="categoryItem__content">
<div class="categoryItem__headline">Categoryname</div>
</div>
</a>
</div>
<div class="col-6 col-md-4 marginBottom">
<a href="#" class="categoryItem">
<div class="categoryItem__image imageCover">
<img src="kss-assets/sample.png" alt="Categoryname">
</div>
<div class="categoryItem__content">
<div class="categoryItem__headline">Categoryname</div>
</div>
</a>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 16508
Example
Markup
<div class="categoryItempreviewList">
<div class="row row--flexsub gridGap--small">
<div class="col-xs-12 col-sm-4 col-md-3 marginBottom">
<a href="#" class="categoryItempreview">
<div class="categoryItempreview__headline">Name</div>
<div class="categoryItempreview__items">
<div class="categoryItempreview__item">
<span class="categoryItempreview__itemImage image">
<img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
</span>
</div>
<div class="categoryItempreview__item">
<span class="categoryItempreview__itemImage image">
<img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
</span>
</div>
<div class="categoryItempreview__item">
<span class="categoryItempreview__itemImage image">
<img src="kss-assets/sample.png" alt="Description" loading="lazy"/>
</span>
</div>
<div class="categoryItempreview__count">
+99
</div>
</div>
</a>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 16717
Example
Pay with Amazon
Pay with Paypal
Markup
<div id="AmazonPayButton" class="checkoutButton checkoutButton--amazon">
<img class="checkoutButton__logo" src="/userdata/checkout/amazonCheckoutLogo.svg" alt="Amazon" />
<div class="checkoutButton__text"><span>Pay with</span> Amazon</div>
</div>
<a href="#" class="checkoutButton checkoutButton--paypal">
<img class="checkoutButton__logo" src="/userdata/checkout/paypalCheckoutLogo.svg" alt="PayPal">
<div class="checkoutButton__text"><span>Pay with</span> Paypal</div>
</a>
Source:
build/doc/doc.css, line 19389
Example
Filter
Filter
Markup
<div class="filterBox">
<div class="filterBox__mobileButton">Filter</div>
<div class="filterBox__content">
<div class="filterBox__contentHeader">
<div class="filterBox__contentTitle">Filter</div>
<div class="filterBox__close">
<i class="icon icon-close"></i>
</div>
</div>
<div class="filterBox__filter">
<div class="row gridGap--small">
<div class="col-12 col-lg-9 filtersColumn">
<div class="row gridGap--small">
<div class="col-12 col-sm-4 col-md-3 marginBottom">
<div class="inputGroup is-filled">
<div class="customSelect js-customSelect">
<select class="customSelect__hiddenFormField">
<option value="callaway">filter-Marke-8</option>
<option value="titleist">filter-Marke-8</option>
<option value="taylormade">filter-Marke-8</option>
</select>
<div class="customSelect__selected">Marke</div>
<div class="customSelect__dropdown">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader d-block d-sm-none">
<div class="customSelect__dropdownTitle">
Marke
</div>
</div>
<div class="customSelect__dropdownBody">
<a href="?marke=callaway&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
Callaway
</div>
</a>
<a href="?marke=titleist&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
Titleist
</div>
</a>
<a href="?marke=taylormade&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
TaylorMade
</div>
</a>
</div>
</div>
</div>
</div>
</div><div class="col-12 col-sm-4 col-md-3 marginBottom">
<div class="inputGroup is-filled">
<form method="get" class="customSelect js-customSelect customSelect--multiple">
<input class="customSelect__hiddenFormField" name="farbe" value="">
<input class="customSelect__hiddenFormField" name="sort_by" value="base_price_desc">
<div class="customSelect__selected">
Farbe <span class="customSelect__selectedCount"></span>
</div>
<div class="customSelect__dropdown js-searchWrapper">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader">
<div class="customSelect__dropdownTitle">
Farbe
</div>
<div class="inputGroup searchBar">
<input class="js-searchInput" data-wrapper="js-searchWrapper" data-item="js-searchItem" type="text" placeholder="Filter suchen">
<span class="inputGroup__addon"><i class="icon icon-search"></i></span>
</div>
</div>
<div class="customSelect__dropdownBody">
<div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz">
<div class="customSelect__dropdownItemHeadline">Schwarz</div>
</div>
<div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/silber">
<div class="customSelect__dropdownItemHeadline">Schwarz/ Silber</div>
</div>
<div class="js-searchItem customSelect__dropdownItem customSelect__dropdownItem--checkbox" data-value="schwarz/rot">
<div class="customSelect__dropdownItemHeadline">Schwarz/ Rot</div>
</div>
</div>
<div class="customSelect__dropdownFooter">
<button type="submit" class="button button--action button--sm">
Anwenden
</button>
<br>
<button class="linkWithIcon customSelectReset">
<i class="icon icon-retoure"></i><span>Zurücksetzen</span>
</button>
</div>
</div>
</form>
</div>
</div><div class="col-12 col-sm-4 col-md-3 marginBottom">
<div class="inputGroup is-filled">
<div class="customSelect js-customSelect">
<select class="customSelect__hiddenFormField">
<option value="regular">filter-Flex-4</option>
<option value="stiff">filter-Flex-4</option>
</select>
<div class="customSelect__selected">Flex</div>
<div class="customSelect__dropdown">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader d-block d-sm-none">
<div class="customSelect__dropdownTitle">
Flex
</div>
</div>
<div class="customSelect__dropdownBody">
<a href="?flex=regular&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
Regular (R)
</div>
</a>
<a href="?flex=stiff&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
Stiff (S)
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
<div class="inputGroup is-filled">
<div class="customSelect js-customSelect">
<select class="customSelect__hiddenFormField">
<option value="60.00">filter-Lie-Winkel-6</option>
<option value="58.50">filter-Lie-Winkel-6</option>
</select>
<div class="customSelect__selected">Lie-Winkel</div>
<div class="customSelect__dropdown">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader d-block d-sm-none">
<div class="customSelect__dropdownTitle">
Lie-Winkel
</div>
</div>
<div class="customSelect__dropdownBody">
<a href="?lie=60.00&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
60
</div>
</a>
<a href="?lie=58.50&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
58.50
</div>
</a>
</div>
</div>
</div>
</div>
</div><div class="col-12 col-sm-4 col-md-3 marginBottom hiddenFilter">
<div class="inputGroup is-filled">
<div class="customSelect js-customSelect">
<select class="customSelect__hiddenFormField">
<option value="10.00">filter-Loft-7</option>
<option value="11.50">filter-Loft-7</option>
<option value="10.50">filter-Loft-7</option>
<option value="9.00">filter-Loft-7</option>
</select>
<div class="customSelect__selected">Loft</div>
<div class="customSelect__dropdown">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader d-block d-sm-none">
<div class="customSelect__dropdownTitle">
Loft
</div>
</div>
<div class="customSelect__dropdownBody">
<a href="?loft=10.00&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
10
</div>
</a>
<a href="?loft=11.50&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
11.50
</div>
</a>
<a href="?loft=10.50&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
10.50
</div>
</a>
<a href="?loft=9.00&sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
<div class="customSelect__dropdownItemHeadline">
9
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="filterBox__toggleFilterColumn marginBottom">
<span class="link filterBox__showHiddenFilters">+ Mehr Filter</span>
</div>
</div>
</div>
<div class="col-12 col-sm-4 col-lg-3 marginBottom sortSelectColumn">
<form method="get" class="inputGroup is-filled">
<div class="customSelect js-customSelect customSelect--small sortingSelect ">
<select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by">
<option value="item_no">Artikelnummer</option>
<option value="description">Artikelbezeichnung</option>
<option value="creation_date">Neueste</option>
<option value="sorting">Empfehlung</option>
<option value="base_price_asc">Preis aufsteigend</option>
<option value="base_price_desc" selected="">Preis absteigend</option>
</select>
<div class="customSelect__selected">Preis absteigend</div>
<div class="customSelect__dropdown">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader d-block d-sm-none">
<div class="customSelect__dropdownTitle">
Sortierung
</div>
</div>
<div class="customSelect__dropdownBody">
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
<div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
<div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="creation_date">
<div class="customSelect__dropdownItemHeadline">Neueste</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
<div class="customSelect__dropdownItemHeadline">Empfehlung</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="base_price_asc">
<div class="customSelect__dropdownItemHeadline">Preis aufsteigend</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="base_price_desc">
<div class="customSelect__dropdownItemHeadline">Preis absteigend</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 17556
Example
Markup:
Description (2)
Markup
Markup:<div class="historyList"><div class="col-6 col-sm-4 col-md-3 col-lg-2 marginBottom--large">
<div class="historyListItem">
<div class="historyListItem__image image">
<img src="kss-assets/sample.png" alt="Description" loading="lazy" />
</div>
<div class="historyListItem__info">
<div class="historyListItem__name">
Description (2)
</div>
</div>
</div>
</div></div>
Source:
build/doc/doc.css, line 20041
Examples
Default styling
Text
Shipping Info
.available
Available
Text
Shipping Info
.low_availability
Low availability
Text
Shipping Info
.not_available
Not Available
Text
Shipping Info
.not_available_orderable
Not Available Orderable
Text
Shipping Info
.not_available_orderable_number
Not Available Orderable Number
Text
Shipping Info
Markup
<div class="inventoryWrapper">
<div class="inventory [modifier class]">
<span itemprop="availability" content="http://schema.org/InStock"></span>
<p>Text</p>
</div>
<div class="inventoryShippingInfo">
Shipping Info
</div>
</div>
Source:
build/doc/doc.css, line 16321
Example
Headline
Summe Bestellung
999,00 €
Versandkosten
+8,90 €
Markup
<div class="orderboxSummary">
<div class="orderboxSummary__head">
<div class="orderboxSummary__headline">Headline</div>
</div>
<div class="orderboxSummary__main">
<div class="amountLines">
<div class="amountLine">
<div class="amountLine__label">Summe Bestellung</div>
<div class="amountLine__value">999,00 €</div>
</div>
<div class="amountLine">
<div class="amountLine__label">Versandkosten</div>
<div class="amountLine__value">+8,90 €</div>
</div>
</div>
</div>
<div class="orderboxSummary__footer">
<div class="amountLines">
<div class="amountLine amountLine--big">
<div class="amountLine__label">Gesamtsumme</div>
<div class="amountLine__value">1.007,90 €</div>
</div>
<div class="amountLine">
<div class="amountLine__label">enthaltene MwSt. 19%</div>
<div class="amountLine__value">160,93 €</div>
</div>
</div>
<div class="orderboxSummary__buttons">
<button type="submit" class="button button--primary button--xl">Order</button>
</div>
<div class="orderboxSummary__trust">
<ul class="trustList">
<li><i class="icon icon-shipping"></i> Kostenloser Versand ab 50€</li>
<li><i class="icon icon-invoice"></i> Kauf auf Rechnung</li>
<li><i class="icon icon-retoure"></i> 50 Tage Rückgaberecht</li>
</ul>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 17378
Example
299,95 €
199,95 €
Price incl. 19% VAT.
Markup
<div class="prices">
<span class="crossPrice">299,95 €</span>
<span class="basePrice">199,95 €</span>
<span class="priceNotice">Price incl. 19% VAT.</span>
</div>
Source:
build/doc/doc.css, line 16260
Example
Action
Sale
New
New
Markup
<div class='promotions'>
<div class='promotion promotion--1'>Action</div>
<div class='promotion promotion--2'>Sale</div>
<div class='promotion promotion--3'>New</div>
<div class='promotion promotion--clickable'>New</div>
</div>
Source:
build/doc/doc.css, line 16197
Examples
Default styling
Small
:hover
Hover
Small
:focus
Focus
Small
:active
Active
Small
disabled
Disabled
Small
Markup
<div class="quantity">
<input type="number" name="name" value="0" min="1" max="99" step="1" [modifier class]>
<div class="quantity__spinner">
<div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
<i class="icon icon-spinner-up"></i>
</div>
<div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
<i class="icon icon-spinner-down"></i>
</div>
</div>
</div><br/>
<strong>Small</strong><br/>
<div class="quantity quantity--small">
<input type="number" name="name" value="0" min="1" max="99" step="1" [modifier class]>
<div class="quantity__spinner">
<div class="quantity__spinnerItem quantity__spinnerItem--up js-spinnerUp">
<i class="icon icon-spinner-up"></i>
</div>
<div class="quantity__spinnerItem quantity__spinnerItem--down js-spinnerDown">
<i class="icon icon-spinner-down"></i>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 16387
Example
Preis absteigend
Sortierung
Artikelnummer
Artikelbezeichnung
Neueste
Empfehlung
Preis aufsteigend
Preis absteigend
Markup
<div class="customSelect js-customSelect customSelect--small sortingSelect ">
<select class="customSelect__hiddenFormField js-formSubmitChange" name="sort_by">
<option value="item_no">Artikelnummer</option>
<option value="description">Artikelbezeichnung</option>
<option value="creation_date">Neueste</option>
<option value="sorting">Empfehlung</option>
<option value="base_price_asc">Preis aufsteigend</option>
<option value="base_price_desc" selected="">Preis absteigend</option>
</select>
<div class="customSelect__selected">Preis absteigend</div>
<div class="customSelect__dropdown">
<div class="customSelect__dropdownClose">
<i class="icon icon-close"></i>
</div>
<div class="customSelect__dropdownHeader d-block d-sm-none">
<div class="customSelect__dropdownTitle">
Sortierung
</div>
</div>
<div class="customSelect__dropdownBody">
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="item_no">
<div class="customSelect__dropdownItemHeadline">Artikelnummer</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="description">
<div class="customSelect__dropdownItemHeadline">Artikelbezeichnung</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="creation_date">
<div class="customSelect__dropdownItemHeadline">Neueste</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="sorting">
<div class="customSelect__dropdownItemHeadline">Empfehlung</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio" data-value="base_price_asc">
<div class="customSelect__dropdownItemHeadline">Preis aufsteigend</div>
</div>
<div class="customSelect__dropdownItem customSelect__dropdownItem--radio is-active" data-value="base_price_desc">
<div class="customSelect__dropdownItemHeadline">Preis absteigend</div>
</div>
</div>
</div>
</div>
Source:
build/doc/doc.css, line 17491
Example
Markup
<div class="variantSelection">
<a class="variantSelection__item" data-tooltip="Label">
<img src="kss-assets/sample.png" alt="Text" />
</a>
</div>
Source:
build/doc/doc.css, line 18147