Style Guide

3.1 #Components.Action Icon Action Icon

Examples

Default styling

:hover

Hover

:focus

Focus

.is-loading

Loading

.is-success

Success

.is-error

Error

Markup

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

Source: build/doc/doc.css, line 11507

3.2 #Components.Actionbox Actionbox

Example

Text

Markup

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

Source: build/doc/doc.css, line 13902

3.3 #Components.Alerts Alerts

Examples

Default styling

Text

.alert--danger

Danger

Text

.alert--success

Success

Text

.alert--warning

Warning

Text

.alert--primary

Primary

Text

.alert--secondary

Secondary

Text

Markup

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

Source: build/doc/doc.css, line 9788

3.4 #Components.Breadcrumb Breadcrumb

Example

Back

Markup

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

Source: build/doc/doc.css, line 13157

3.5 #Components.Custom Select Custom Select

Examples

Default styling

Choose

Title

S

M

L

XL

Not available

XL

.is-loading

is loading

Choose

Title

S

M

L

XL

Not available

XL

.is-success

is success

Choose

Title

S

M

L

XL

Not available

XL

.is-error

is error

Choose

Title

S

M

L

XL

Not available

XL

.customSelect--small

Small Custom Select

Choose

Title

S

M

L

XL

Not available

XL

.customSelect--small.is-loading

Small Custom Select is loading

Choose

Title

S

M

L

XL

Not available

XL

.customSelect--small.is-success

Small Custom Select is success

Choose

Title

S

M

L

XL

Not available

XL

.customSelect--small.is-error

Small Custom Select is error

Choose

Title

S

M

L

XL

Not available

XL

Markup

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

Source: build/doc/doc.css, line 12375

3.6 #Components.Iconbar Iconbar

Examples

Default styling

Account

Headline

Link
Link

+99 Favorites

+99 Basket

Max Mustermann MM

.iconbar--landscape

Orientation landscape

Account

Headline

Link
Link

+99 Favorites

+99 Basket

Max Mustermann MM

Markup

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

Source: build/doc/doc.css, line 10234

3.7 #Components.Iconbox Iconbox

Example

Kostenloser Versand ab 50 € Erhalten Sie kostenfreien Versand ab einem Bestellwert von 50 €

Markup

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

Source: build/doc/doc.css, line 10563

3.8 #Components.Iconlist Iconlist

Example

Markup

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

Source: build/doc/doc.css, line 10526

3.9 #Components.Max Height Content Max Height Content

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer

Example

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.

Markup

<div class="maxHeightContent js-maxHeightContent" data-button-foldout="read more" data-button-foldin="fold in">
  <div>
  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.

Source: build/doc/doc.css, line 13924

3.10 #Components.Modals Modals

Examples

Default styling

Open Modal

.modal--info

Info

Open Modal

.modal--error

Error

Open Modal

.modal--success

Success

Open Modal

Markup

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

Source: build/doc/doc.css, line 11742

3.11 #Components.Pagination Pagination

Example

1 2 3 ... 5

Markup

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

Source: build/doc/doc.css, line 9981

3.12 #Components.Processbar Processbar

Example

Label

Markup

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

Source: build/doc/doc.css, line 10046

3.13 #Components.Radio List Radio List

Examples

Default styling

Headline Summary

radioList--small

Small

Headline Summary

Markup

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

Source: build/doc/doc.css, line 12046

3.14 #Components.Rating Rating

Example

(4,5/5) Trusted Shops

Markup

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

Source: build/doc/doc.css, line 11414

3.15 #Components.Searchbar Searchbar

You can add minified Classes for each Viewport Size (--minified-xs,--minified-sm,--minified-md,--minified-lg,--minified-xlg)

.searchBar--minified .searchBar--small .is-focus

Example

Markup

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

Source: build/doc/doc.css, line 11045

3.16 #Components.Share Links Share Links

Example

Share on Facebook Share on Pinterest

Markup

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

Source: build/doc/doc.css, line 12285

3.17 #Components.Tags Tags

Examples

Default styling

Tagname

:hover

Hover

Tagname

:focus

Focus

Tagname

:active

Active

Tagname

.is-loading

Is loading

Tagname

.is-success

Is success

Tagname

.is-error

Is error

Tagname

Markup

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

Source: build/doc/doc.css, line 11607

3.18 #Components.Tags Group Tags Group

Example

Tagname Tagname Tagname Tagname Tagname Tagname Tagname Tagname

Markup

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

Source: build/doc/doc.css, line 11622

3.19 #Components.Trust Infobar Trust Infobar

Example

Text

Markup

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

Source: build/doc/doc.css, line 10699

3.20 #Components.Trustbar Trustbar

JS-Source: ../global/js/trustbar.js

Example

Trust 1

Trust 2

Trust 3

Trust 1

Trust 2

Trust 3

Markup

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

Source: build/doc/doc.css, line 10607

3.21 #Components.Trustlist Trustlist

Example

Kauf auf Rechnung
Kostenloser Versand & Rückversand
100 Tage Rückgaberecht

Markup

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

Source: build/doc/doc.css, line 10748