<button class="actionIcon [modifier class]"><i class="icon icon-favorites"></i></button>

<div class="actionBox">
  Text
</div>

<div class="alert [modifier class]">Text</div>

<div class="breadcrumbWrapper">
  <div class="breadcrumb">
    <a href="#">Level 1</a>
    <i class="icon icon-angle-right"></i>
    <a href="#">Level 2</a>
    <i class="icon icon-angle-right"></i>
    <span class="current">Current</span>
  </div>
  <a class="breadcrumbBackbutton" href="#"><i class="icon icon-angle-left"></i>Back</a>
</div>

<div class="customSelect js-customSelect [modifier class]">
  <select>
    <option disabled selected></option>
    <option value="s">S</option>
    <option value="m">M</option>
    <option value="l">L</option>
    <option value="xl" disabled>XL</option>
    <option value="xxl">XXL</option>
  </select>
  <div class="customSelect__selected">Choose</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">
            Title
        </div>
    </div>
    <div class="customSelect__dropdownItem" data-value="s">
      <div class="customSelect__dropdownItemHeadline">S</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="m">
      <div class="customSelect__dropdownItemHeadline">M</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="l">
      <div class="customSelect__dropdownItemHeadline">L</div>
    </div>
    <div class="customSelect__dropdownItem disabled" data-value="xl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
      <div class="customSelect__dropdownItemText">Not available</div>
    </div>
    <div class="customSelect__dropdownItem" data-value="xxl">
      <div class="customSelect__dropdownItemHeadline">XL</div>
    </div>
  </div>
</div>

<div class="iconbar [modifier class]">
    <div class="iconbarItem">
      <a class="iconbarIcon" href="#" title="Account">
          <span class="iconbarIcon__icon">
              <i class="icon icon-user" aria-hidden="true"></i>
          </span>
          <span class="iconbarIcon__label">Account</span>
      </a>
      <div class="iconbarHover iconbarHover--basket">
          <div class="iconbarHover__close">
              <i class="icon icon-close"></i>
          </div>
          <div class="iconbarHover__headline">
              Headline
          </div>
          <div class="iconbarHover__body">
            <ul class="iconbarNavigation">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </div>
          <div class="iconbarHover__footer">
              <div class="amountLines">
                  <div class="amountLine amountLine--big">
                      <div class="amountLine__label">Sum</div>
                      <div class="amountLine__value">999,99&nbsp;€</div>
                  </div>
              </div>
              <a href="#" class="button button--action button--xl" style="width: 100%">
                  To Basket
              </a>
          </div>
      </div>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon" href="#" title="Favorites">
          <span class="iconbarIcon__icon">
              <i class="icon icon-favorites" aria-hidden="true"></i>
              <span class="iconbarIcon__count">+99</span>
          </span>
          <span class="iconbarIcon__label">Favorites</span>
      </a>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon active" href="#" title="Basket">
          <span class="iconbarIcon__icon">
              <i class="icon icon-basket" aria-hidden="true"></i>
              <span class="iconbarIcon__count">+99</span>
          </span>
          <span class="iconbarIcon__label">Basket</span>
      </a>
    </div>
    <div class="iconbarItem">
      <a class="iconbarIcon active" href="#" title="Name">
          <span class="iconbarIcon__label">Max Mustermann</span>
          <span class="iconbarIcon__badge">MM</span>
      </a>
    </div>
</div>

<div class="iconbox">
    <i class="icon icon-shipping"></i>Kostenloser Versand ab 50 €
    <small>Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €</small>
</div>

<div class="iconList">
  <a href="#"><i class="icon icon-facebook"></i></a>
  <a href="#"><i class="icon icon-twitter"></i></a>
  <a href="#"><i class="icon icon-youtube"></i></a>
  <a href="#"><i class="icon icon-tiktok"></i></a>
  <a href="#"><i class="icon icon-instagram"></i></a>
  <a href="#"><i class="icon icon-pinterest"></i></a>
</div>

<a href="javascript:void(0)" class="button" data-modal='id-[modifier class]'>Open Modal</a>
<div class="modal [modifier class]" id="id-[modifier class]">
    <div class="modal__dialog" role="document">
        <div class="modal__content">
            <div class="modal__header">
                <div class="modal__title">Title<br/><small>Subtitle</small></div>
                <div class="modal__close" data-close="modal">
                    <i class="icon icon-close"></i>
                </div>
            </div>
            <div class="modal__body">
              Lorem Ipsum
            </div>
            <div class="modal__footer">
                <button class="button button--action">Save</button>
                <span class="button" data-close="modal">Abort</span>
            </div>
        </div>
    </div>
</div>

<div class="pagination">
    <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="pagination__item " href="?page=1&amp;sort_by=ranking">1</a>
    <a class="pagination__item " href="?page=2&amp;sort_by=ranking">2</a>
    <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking">3</a>
    <span class="pagination__item pagination__item--seperator">...</span>
    <a class="pagination__item " href="?page=5&amp;sort_by=ranking">5</a>
    <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking">
        <i class="icon icon-angle-right"></i>
    </a>
</div>

<div class="processbar">
    <div class="processbar__items">
      <div class="processbar__item is-done">
          <i class="processbar__icon icon icon-order-address"></i>
          <span class="processbar__label">Label</span>
      </div>
      <div class="processbar__item is-active">
          <i class="processbar__icon icon icon-order-payment"></i>
          <span class="processbar__label">Label</span>
      </div>
      <div class="processbar__item">
          <i class="processbar__icon icon icon-order-check"></i>
          <span class="processbar__label">Label</span>
      </div>
    </div>
    <div class="processbar__inactive"></div>
    <div class="processbar__active"></div>
</div>

<div class="radioList [modifier class]">
        <label for="radio1" class="radioListItem">
            <input type="radio" name="radio" id="radio1" value="1" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
        <label for="radio2" class="radioListItem">
            <input type="radio" name="radio" id="radio2" value="2" checked>
            <i></i>
            <span class="radioListItem__text">
            <span class="radioListItem__headline">
                Headline
            </span>
                    <span class="radioListItem__summary">
                        Summary
                    </span>
            </span>
                <span class="radioListItem__image">
                    <img src="kss-assets/sample.png" alt="Headline" loading="lazy" width="57px" height="38px">
                </span>
        </label>
</div>

<div class="rating">
    <div class="rating__stars">
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active"><i class="icon icon-star"></i></span>
        <span class="rating__star rating__star--active-half"><i class="icon icon-star"></i></span>
    </div>
    <div class="rating__label">
        (4,5/5) Trusted Shops
    </div>
</div>

<div class="inputGroup searchBar ">
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
  <input type="text" placeholder="Search..." />
</div>

<div class="shareLinks">
    <a class="shareLink" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Facebook teilen">
        <i class="icon icon-facebook"></i>
        <span>Share on Facebook</span>
    </a>
    <a class="shareLink" href="https://www.pinterest.com/pin/create/link/?url=http%3A%2F%2Flocalhost%3A8090%2Fde%2Fjucad-carbon-travel-1-0-camouflage-p202%2F" title="Auf Pinterest pinnen">
        <i class="icon icon-pinterest"></i>
        <span>Share on Pinterest</span>
    </a>
</div>

<span class="tag [modifier class]">Tagname</span>

<div class="tags">
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
<span class="tag">Tagname</span>
</div>

<div class="trustInfobar">
<span class="trustInfobar__label">Text</span>
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
<img src="kss-assets/sample.png">
</div>

<div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;}'>
  <div class="textcontent">Trust 1</div>
  <div class="textcontent">Trust 2</div>
  <div class="textcontent">Trust 3</div>
</div>
<div class="trustBar js-trustBar" data-options='{"hasCloseBtn":true;"items":3}'>
  <div class="textcontent">Trust 1</div>
  <div class="textcontent">Trust 2</div>
  <div class="textcontent">Trust 3</div>
</div>

<ul class="trustList">
    <li>
        <i class="icon icon-payment"></i> Kauf auf Rechnung
    </li>
    <li>
        <i class="icon icon-shipping"></i> Kostenloser Versand &amp; Rückversand
    </li>
    <li>
        <i class="icon icon-reload"></i> 100 Tage Rückgaberecht
    </li>
</ul>