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 11795

3.2 #Components.Actionbox Actionbox

Example

Text

Markup

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

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

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 10048

3.4 #Components.Breadcrumb Breadcrumb

Example

Back

Markup

<nav aria-label="Breadcrumb" aria-hidden="true" class="breadcrumbWrapper">
  <ul class="breadcrumb">
    <li>
    <a href="#">Level 1</a>
    </li>
    <i class="icon icon-angle-right"></i>
    <li>
    <a href="#">Level 2</a>
    </li>
    <i class="icon icon-angle-right"></i>
    <li aria-current="page" class="current">
    <span>Current</span>
    </li>
  </div>
  <a class="breadcrumbBackbutton" href="#"><i class="icon icon-angle-left"></i>Back</a>
</div>

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

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 12682

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 10519

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 10840

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 10803

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 14237

3.10 #Components.Modals Modals

Examples

Default styling

Open Modal

<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>
                <a href="javascript:void(0)" class="modal__close" data-close="modal" aria-label="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>
                <a href="javascript:void(0) class="button" data-close="modal" aria-label="Close Modal">Abort</span>
            </div>
        </div>
    </div>
</div>

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

3.11 #Components.Pagination Pagination

Example

Markup

<nav role="navigation" aria-label="Pagination">
  <ul class="pagination">
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=2&amp;sort_by=ranking" aria-label="Previous Page">
            <i class="icon icon-angle-left" aria-hidden="true"></i>
        </a>
      </li>
      <li>
        <a class="pagination__item " href="?page=1&amp;sort_by=ranking" aria-label="Goto Page 1">1</a>
      </li>
      <li>
        <a class="pagination__item " href="?page=2&amp;sort_by=ranking" aria-label="Goto Page 2">2</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--active" href="?page=3&amp;sort_by=ranking" aria-current="true" aria-label="Goto Page 3">3</a>
      </li>
      <span class="pagination__item pagination__item--seperator">...</span>
      <li>
        <a class="pagination__item " href="?page=5&amp;sort_by=ranking" aria-label="Goto Page 5">5</a>
      </li>
      <li>
        <a class="pagination__item pagination__item--prev" href="?page=4&amp;sort_by=ranking" aria-label="Next Page">
            <i class="icon icon-angle-right" aria-hidden="true"></i>
        </a>
      </li>
  </ul>
</nav>

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

3.12 #Components.Processbar Processbar

Example

Markup

<nav class="processbar" role="navigation>
    <ul class="processbar__items">
      <li class="processbar__item is-done">
          <i class="processbar__icon icon icon-order-address"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item is-active" aria-current="step">
          <i class="processbar__icon icon icon-order-payment"></i>
          <span class="processbar__label">Label</span>
      </li>
      <li class="processbar__item">
          <i class="processbar__icon icon icon-order-check"></i>
          <span class="processbar__label">Label</span>
      </li>
    </ul>
    <div class="processbar__inactive"></div>
    <div class="processbar__active"></div>
</nav>

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

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 12346

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 11702

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 11332

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 12592

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 11895

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 11910

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 10976

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 10884

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 11025