Style Guide

Examples
Default styling
Headline
Name
John Doe
E-Mail
info@dc.ag
Headline
Name
John Doe
E-Mail
info@dc.ag
.accountBox--new
New
Headline
Name
John Doe
E-Mail
info@dc.ag
Headline
Name
John Doe
E-Mail
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&nbsp;</div>
    </div>
    <div class="amountLine">
        <div class="amountLine__label">
            Versand:
        </div>
        <div class="amountLine__value">
            0,00&nbsp;</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&nbsp;</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
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
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
Marke
Farbe
Farbe
Schwarz
Schwarz/ Silber
Schwarz/ Rot

Flex
Lie-Winkel
Lie-Winkel
Loft
+ Mehr Filter
Preis absteigend
Sortierung
Artikelnummer
Artikelbezeichnung
Neueste
Empfehlung
Preis aufsteigend
Preis absteigend
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&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Callaway
                                                </div>
                                            </a>
                                            <a href="?marke=titleist&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    Titleist
                                                </div>
                                            </a>
                                            <a href="?marke=taylormade&amp;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&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                Regular (R)
                                            </div>
                                        </a>
                                        <a href="?flex=stiff&amp;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&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                                <div class="customSelect__dropdownItemHeadline">
                                                    60
                                                </div>
                                            </a>
                                            <a href="?lie=58.50&amp;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&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10
                                            </div>
                                        </a>
                                        <a href="?loft=11.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                11.50
                                            </div>
                                        </a>
                                        <a href="?loft=10.50&amp;sort_by=base_price_desc" class="customSelect__dropdownItem customSelect__dropdownItem--radio">
                                            <div class="customSelect__dropdownItemHeadline">
                                                10.50
                                            </div>
                                        </a>
                                        <a href="?loft=9.00&amp;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
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&nbsp;</div>
      </div>
      <div class="amountLine">
          <div class="amountLine__label">Versandkosten</div>
          <div class="amountLine__value">+8,90&nbsp;</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&nbsp;</div>
        </div>
        <div class="amountLine">
            <div class="amountLine__label">enthaltene MwSt. 19%</div>
            <div class="amountLine__value">160,93&nbsp;</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&nbsp;Tage Rückgaberecht</li>
      </ul>
    </div>
  </div>
</div>
Source: build/doc/doc.css, line 17378
Examples
Default styling
.orderButtonWrapper--inactive
Inactive
Markup
<div class="orderButtonWrapper [modifier class]">
    <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>
    <button type="submit" class="button button--primary orderButton">
          <span>Warenkorb</span><i class="icon icon-basket"></i>
    </button>
</div>
<div class="orderButtonWrapper [modifier class]">
    <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>
    <button type="submit" class="button button--primary orderButton orderButton--customizable">
          <span>Individualisieren</span><i class="icon icon-basket"></i>
    </button>
</div>
Source: build/doc/doc.css, line 17222
Example
299,95 € 199,95 € Price incl. 19% VAT.
Markup
<div class="prices">
    <span class="crossPrice">299,95&nbsp;</span>
    <span class="basePrice">199,95&nbsp;</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