<div class="kss-style"><h6>List</h6></div>
<div>
    <a href="javascript://" class="brand-card brand-card--continue">
        <div class="brand-card__title card-title card-title--two-lines">
            <h4 class="card-title__title">Brand</h4>
        </div>
    </a>
    <a href="javascript://" class="brand-card brand-card--continue">
        <div class="brand-card__title card-title card-title--two-lines">
            <h4 class="card-title__title">Brand</h4>
        </div>
    </a>
</div>
<div class="kss-style"><h6>Grid</h6></div>
<div class="row">
    <div class="col-sm-6 col-md-4 col-xl-3">
        <a href="javascript://" class="brand-card brand-card--grid">
            <div class="brand-card__image">
                <div class="image image--landscape image--fit">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <div class="brand-card__title card-title card-title--two-lines card-title--left-zero">
                <h4 class="card-title__title">Brand <small>45 products</small></h4>
            </div>
        </a>
    </div>
</div>

<a href="javascript://" class="post-card category-card">
    <div class="post-card__title card-title card-title--">
        <h4 class="card-title__title">Listing-Title</h4>
    </div>
    <span class="post-card__description">14</span>
</a>
<a href="javascript://" class="post-card category-card">
    <div class="post-card__title card-title card-title--">
        <h4 class="card-title__title">Listing-Title</h4>
    </div>
    <span class="post-card__description">14</span>
</a>

<div class="row align-items-stretch">
    <div class="col-md-6 col-lg-4">
        <a href="javascript://" class="news-card">
            <div class="news-card__image">
                <div class="image image--landscape image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <div class="news-card__content">
                <div class="news-card__title card-title card-title--two-lines card-title--large card-title--left-zero">
                    <h4 class="card-title__title"><small>Kategorie</small> Titel</h4>
                </div>
                <p class="news-card__text">
                    The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.
                </p>
                <div class="news-card__continue">
                    weiterlesen
                </div>
            </div>
        </a>
    </div>
    <div class="col-sm-12 col-lg-8">
        <a href="javascript://" class="news-card news-card--medium">
            <div class="news-card__image">
                <div class="image image--landscape image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <div class="news-card__content">
                <div class="news-card__title card-title card-title--two-lines card-title--large card-title--left-zero">
                    <h4 class="card-title__title"><small>Kategorie</small> Titel</h4>
                </div>
                <p class="news-card__text">
                    The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.
                </p>
                <div class="news-card__continue">
                    weiterlesen
                </div>
            </div>
        </a>
    </div>
    <div class="col-sm-12">
        <a href="javascript://" class="news-card news-card--large">
            <div class="news-card__image">
                <div class="image image--landscape image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <div class="news-card__content">
                <div class="news-card__title card-title card-title--two-lines card-title--large card-title--left-zero">
                    <h4 class="card-title__title"><small>Kategorie</small> Titel</h4>
                </div>
                <p class="news-card__text">
                    The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.
                </p>
                <div class="news-card__continue">
                    weiterlesen
                </div>
            </div>
        </a>
    </div>
</div>

<div class="kss-style"><h6>List</h6></div>
<div>
    <a href="javascript://" class="person-card person-card--continue">
        <div class="person-card__image">
            <div class="image image--square image--fill image--circle">
                <div class="image__image"><img src="images/test-image.jpg"></div>
            </div>
        </div>
        <div class="person-card__title card-title card-title--two-lines card-title--left-zero">
            <h4 class="card-title__title">Name of that person <small>Function of that person</small></h4>
        </div>
    </a>
    <a href="javascript://" class="person-card person-card--continue">
        <div class="person-card__image">
            <div class="image image--square image--fill image--circle">
                <div class="image__image"><img src="images/test-image.jpg"></div>
            </div>
        </div>
        <div class="person-card__title card-title card-title--two-lines card-title--left-zero">
            <h4 class="card-title__title">Name of that person <small>Function of that person</small></h4>
        </div>
    </a>
</div>
<div class="kss-style"><h6>Grid</h6></div>
<div class="row">
    <div class="col-sm-6 col-md-4 col-xl-3">
        <a href="javascript://" class="person-card person-card--grid">
            <div class="person-card__image">
                <div class="image image--square image--fill image--circle">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <div class="person-card__title card-title card-title--two-lines card-title--left-zero">
                <h4 class="card-title__title">Name of that person <small>Function of that person</small></h4>
            </div>
        </a>
    </div>
</div>

<a href="javascript://" class="post-card">
    <div class="post-card__title card-title">
        <h4 class="card-title__title">Listing-Title</h4>
    </div>
    <span class="post-card__description">This is Action</span>
</a>
<a href="javascript://" class="post-card">
    <div class="post-card__title card-title card-title--two-lines">
        <h4 class="card-title__title">Main Line <small>Second Line</small></h4>
    </div>
    <span class="post-card__description">This is Action</span>
</a>
<a href="javascript://" class="post-card">
    <div class="post-card__title card-title card-title--icon">
        <h4 class="card-title__title icon icon-star-outline">Listing-Title</h4>
    </div>
    <span class="post-card__description">This is Action</span>
</a>
<a href="javascript://" class="post-card">
    <div class="post-card__title card-title card-title--icon card-title--two-lines">
        <h4 class="card-title__title icon icon-star-outline">Main Line <small>Second Line</small></h4>
    </div>
    <span class="post-card__description post-card__description--discreet">This is Action</span>
</a>
<a href="javascript://" class="post-card">
    <div class="post-card__image">
        <div class="image image--square image--fill">
            <div class="image__image"><img src="images/test-image.jpg"></div>
        </div>
    </div>
    <div class="post-card__title card-title card-title--icon card-title--two-lines">
        <h4 class="card-title__title icon icon-star-outline">Main Line <small>Second Line</small></h4>
    </div>
    <span class="post-card__description post-card__description--discreet">This is Action</span>
</a>

<div class="kss-style"><h6>List</h6></div>
<div>
    <div class="product-card product-card--list">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
            <div class="product-card__meta">
                <span class="availability availability--good"></span>
                Hersteller #545587
            </div>
        </a>
        <div class="product-card__price price">
            <span class="price__amount">69.90</span>
        </div>
        <div class="product-card__actions card-actions">
            <div class="product-card__top-left card-actions__disturber">
                <span class="disturber">-11%</span>
            </div>
            <a href="javascript://" class="product-card__top-right card-actions__secondary btn btn--plain btn--icon icon icon-wishlist">add to wishlist</a>
            <a href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket">add to cart</a>
        </div>
    </div>
    <div class="product-card product-card--list">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
            <div class="product-card__meta">
                <span class="availability availability--good"></span>
                Hersteller #545587
            </div>
        </a>
        <div class="product-card__price price price--reduced">
            <span class="price__amount">69.90</span>
            <span class="price__strikethrough">120.00</span>
        </div>
        <div class="product-card__actions card-actions">
            <div class="product-card__top-left card-actions__disturber">
                <span class="disturber">-11%</span>
            </div>
            <a href="javascript://" class="product-card__top-right card-actions__secondary btn btn--plain btn--icon icon icon-wishlist">add to wishlist</a>
            <a href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket">add to cart</a>
        </div>
    </div>
    <div class="product-card product-card--list">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
            <div class="product-card__meta">
                <span class="availability availability--good"></span>
                Hersteller #545587
            </div>
        </a>
        <div class="product-card__price price">
            <span class="price__amount">69.90</span>
        </div>
        <form class="product-card__actions card-actions card-actions--extended">
            <div class="product-card__top-left card-actions__disturber">
                <span class="disturber">-11%</span>
            </div>
            <a href="javascript://" class="product-card__top-right card-actions__secondary btn btn--plain btn--icon icon icon-wishlist">add to wishlist</a>
            <div class="card-actions__quantity quantity quantity--buttons">
                <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
                <button value="-" class="quantity__minus">-</button>
                <button value="+" class="quantity__plus">+</button>
            </div>
            <button href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket">add to cart</button>
        </form>
    </div>
    <div class="product-card product-card--list">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
            <div class="product-card__meta">
                <span class="availability availability--good"></span>
                Hersteller #545587
            </div>
        </a>
        <div class="product-card__price price price--reduced">
            <span class="price__amount">69.90</span>
            <span class="price__strikethrough">120.00</span>
        </div>
        <div class="product-card__actions card-actions card-actions--extended">
            <div class="product-card__top-left card-actions__disturber">
                <span class="disturber">-11%</span>
            </div>
            <a href="javascript://" class="card-actions__primary card-actions__choose-varition">Ausführung wählen</a>
        </div>
    </div>
</div>
<div class="kss-style"><h6>Grid</h6></div>
<div class="row">
    <div class="col-sm-6 col-md-4 col-xl-3">
        <div class="product-card product-card--grid">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
                <div class="product-card__meta">
                    <span class="availability availability--good"></span>
                    Hersteller #545587
                </div>
            </a>
            <div class="product-card__price price">
                <span class="price__amount">69.90</span>
            </div>
            <div class="product-card__actions card-actions">
                <div class="product-card__top-left card-actions__disturber">
                    <span class="disturber">-11%</span>
                </div>
                <a href="javascript://" class="product-card__top-right card-actions__secondary btn btn--plain btn--icon icon icon-wishlist">add to wishlist</a>
                <a href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket">add to cart</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-xl-3">
        <div class="product-card product-card--grid">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
                <div class="product-card__meta">
                    <span class="availability availability--good"></span>
                    Hersteller #545587
                </div>
            </a>
            <div class="product-card__price price price--reduced">
                <span class="price__amount">69.90</span>
                <span class="price__strikethrough">120.00</span>
            </div>
            <div class="product-card__actions card-actions">
                <div class="product-card__top-left card-actions__disturber">
                    <span class="disturber">-11%</span>
                </div>
                <a href="javascript://" class="product-card__top-right card-actions__secondary btn btn--plain btn--icon icon icon-wishlist">add to wishlist</a>
                <a href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket">add to cart</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-xl-3">
        <div class="product-card product-card--grid">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
                <div class="product-card__meta">
                    <span class="availability availability--good"></span>
                    Hersteller #545587
                </div>
            </a>
            <div class="product-card__price price">
                <span class="price__amount">69.90</span>
            </div>
            <form class="product-card__actions card-actions card-actions--extended">
                <div class="product-card__top-left card-actions__disturber">
                    <span class="disturber">-11%</span>
                </div>
                <a href="javascript://" class="product-card__top-right card-actions__secondary btn btn--plain btn--icon icon icon-wishlist">add to wishlist</a>
                <div class="card-actions__quantity quantity quantity--buttons">
                    <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
                    <button value="-" class="quantity__minus">-</button>
                    <button value="+" class="quantity__plus">+</button>
                </div>
                <button href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket">add to cart</button>
            </form>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-xl-3">
        <div class="product-card product-card--grid">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
                <div class="product-card__meta">
                    <span class="availability availability--good"></span>
                    Hersteller #545587
                </div>
            </a>
            <div class="product-card__price price price--reduced">
                <span class="price__amount">69.90</span>
                <span class="price__strikethrough">120.00</span>
            </div>
            <div class="product-card__actions card-actions card-actions--extended">
                <div class="product-card__top-left card-actions__disturber">
                    <span class="disturber">-11%</span>
                </div>
                <a href="javascript://" class="card-actions__primary card-actions__choose-varition">Ausführung wählen</a>
            </div>
        </div>
    </div>
</div>
<div class="kss-style"><h6>Slider</h6></div>
<div class="row">
    <div class="col-sm-6 col-md-4 col-xl-3">
        <div class="product-card product-card--slider">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <div class="product-card__disturber">
                    <span class="disturber">-11%</span>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
            </a>
            <div class="product-card__price price">
                <span class="price__amount">69.90</span>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-xl-3">
        <div class="product-card product-card--slider">
            <a href="javascript://" class="product-card__link">
                <div class="product-card__image">
                    <div class="image image--square image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <div class="product-card__disturber">
                    <span class="disturber">-11%</span>
                </div>
                <h4 class="product-card__title">
                    Title
                </h4>
            </a>
            <div class="product-card__price price price--reduced">
                <span class="price__amount">69.90</span>
                <span class="price__strikethrough">120.00</span>
            </div>
        </div>
    </div>
</div>
<div class="kss-style"><h6>Micro</h6></div>
<div>
    <div class="product-card product-card--micro product-card--continue">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
        </a>
    </div>
    <div class="product-card product-card--micro">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
            <span class="product-card__action">
                125.00
            </span>
        </a>
    </div>
</div>
<div class="kss-style"><h6>Basket</h6></div>
<div>
    <div class="product-card product-card--basket">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
            <div class="product-card__meta">
                <span class="availability availability--good"></span>
                Hersteller #545587
            </div>
            <div class="product-card__info">
                Farbe Blau, Grösse M
            </div>
        </a>
        <div class="product-card__price price price--stacked">
            <span class="price__amount">69.90</span>
        </div>
        <form class="product-card__actions card-actions card-actions--extended">
            <div class="card-actions__quantity quantity quantity--buttons">
                <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
                <button value="-" class="quantity__minus">-</button>
                <button value="+" class="quantity__plus">+</button>
            </div>
            <button href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-menu-more"></button>
            <div class="card-actions__disturber">
                <span class="disturber">-11%</span>
            </div>
        </form>
    </div>
    <div class="product-card product-card--basket">
        <a href="javascript://" class="product-card__link">
            <div class="product-card__image">
                <div class="image image--square image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <h4 class="product-card__title">
                Title
            </h4>
            <div class="product-card__meta">
                <span class="availability availability--good"></span>
                Hersteller #545587
            </div>
            <div class="product-card__info">
                Farbe Blau, Grösse M
            </div>
        </a>
        <div class="product-card__price price price--reduced price--stacked">
            <span class="price__amount">69.90</span>
            <span class="price__strikethrough">120.00</span>
        </div>
        <form class="product-card__actions card-actions card-actions--extended">
            <div class="card-actions__quantity quantity quantity--buttons">
                <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
                <button value="-" class="quantity__minus">-</button>
                <button value="+" class="quantity__plus">+</button>
            </div>
            <button href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-menu-more"></button>
            <div class="card-actions__disturber">
                <span class="disturber">-11%</span>
            </div>
        </form>
    </div>
</div>

<div class="kss-style"><h6>List</h6></div>
<div>
    <a href="javascript://" class="teaser-card">
        <div class="teaser-card__image">
            <div class="image image--landscape image--fill">
                <div class="image__image"><img src="images/test-image.jpg"></div>
            </div>
        </div>
        <div class="teaser-card__title card-title card-title--two-lines card-title--alternate card-title--left-zero">
            <h4 class="card-title__title"><small>Small subtitle</small> Title of card</h4>
        </div>
    </a>
</div>
<div class="kss-style"><h6>Grid</h6></div>
<div class="row">
    <div class="col-sm-6 col-md-4 col-xl-3">
        <a href="javascript://" class="teaser-card teaser-card--grid">
            <div class="teaser-card__image">
                <div class="image image--landscape image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <div class="teaser-card__title card-title card-title--two-lines card-title--alternate card-title--left-zero">
                <h4 class="card-title__title"><small>Small subtitle</small> Title of card</h4>
            </div>
        </a>
    </div>
</div>
<div class="kss-style"><h6>Grid responsive</h6></div>
<div class="row">
    <div class="col-sm-6 col-md-4 col-xl-3">
        <a href="javascript://" class="teaser-card teaser-card--grid-responsive">
            <div class="teaser-card__image">
                <div class="image image--landscape image--fill">
                    <div class="image__image"><img src="images/test-image.jpg"></div>
                </div>
            </div>
            <div class="teaser-card__title card-title card-title--two-lines card-title--alternate card-title--left-zero">
                <h4 class="card-title__title"><small>Small subtitle</small> Title of card</h4>
            </div>
        </a>
    </div>
</div>

<div class="flyout">
    <div class="flyout__wrapper">
        <div class="flyout__title bar bar--return">
            <a href="javascript://" class="bar__title">
                Heading 3
            </a>
        </div>
        <p class="flyout__description">
            Zusätzliche Beschreibung zum Titel, welcher bereits oben abgebildet ist.
        </p>
        <div class="flyout__body">
            <a href="javascript://" class="post-card">
                <span class="post-card__title card-title">
                    Merkliste XYZ
                </span>
                <span class="post-card__description post-card__description--discreet icon icon-select-box"></span>
            </a>
        </div>
    </div>
</div>
<br>
<div class="flyout flyout--confirmation">
    <div class="flyout__wrapper">
        <div class="flyout__title bar bar--return">
            <a href="javascript://" class="bar__title">
                Merkliste wirklich löschen?
            </a>
        </div>
        <p class="flyout__description">
            Möchtest du die Merkliste "Einkaufsliste vom 13.07.2019" wirklich löschen?
        </p>
        <div class="flyout__body">
            <ul class="message-actions">
                <li>
                    <a href="javascript://" class="btn">Abbrechen</a>
                </li>
                <li>
                    <a href="javascript://" class="btn btn--shout btn--danger">Bestätigen</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="kss-style"><h6>Notifications</h6></div>
<div class="message message--success">
    <p class="message__primary">
        I am the first part of the <strong>success</strong> <a href="javascript://">message</a>
    </p>
    <p class="message__secondary">
        I am the second part of the message
    </p>
</div>
<br>
<div class="message message--success message--close woocommerce-message" role="alert">
    <div class="message__wrapper">
        <a href="javascript://" class="message__action restore-item btn">Rückgängig?</a>
        <div class="message__primary">I am the first part of the <strong>success</strong></div>
    </div>
</div>
<br>
<div class="message message--info">
    <p class="message__primary">
        I am the first part of the <strong>info</strong> <a>message</a>
    </p>
    <p class="message__secondary">
        I am the second part of the message
    </p>
</div>
<br>
<div class="message message--warning">
    <p class="message__primary">
        I am the first part of the <strong>warning</strong> message
    </p>
    <p class="message__secondary">
        I am the second part of the message
    </p>
</div>
<br>
<div class="message message--danger">
    <p class="message__primary">
        I am the first part of the <strong>danger</strong> message
    </p>
    <p class="message__secondary">
        I am the second part of the message
    </p>
</div>
<br>
<div class="message message--danger">
    <div class="message__wrapper">
        <ul class="message__actions message-actions">
            <li>Möchten Sie wirklich den Warenkorb leeren?</li>
            <li class="message-actions__right">
                <a href="javascript://" class="confirm-button confirm-yes btn">Ja</a><a href="javascript://" class="confirm-button confirm-no btn">Nein</a>
            </li>
        </ul>
    </div>
</div>
<div class="kss-style"><h6>Cookie-Banner</h6></div>
<div class="message">
    <a href="javascript://" class="message__action btn">Default</a>
    <p class="message__primary">
        Diese Website verwendet Cookies. Indem du diese Website nutzt, erklärst du dich mit dieser Verwendung einverstanden.
    </p>
    <p class="message__secondary">
        <a href="javascript://">Weitere Informationen</a>
    </p>
</div>
<div class="kss-style"><h6>Actions</h6></div>
<div class="message">
    <ul class="message__actions message-actions">
        <li>
            <a href="javascript://" class="btn btn--shout">Shout Default</a>
        </li>
    </ul>
</div>
<br>
<div class="message">
    <ul class="message__actions message-actions">
        <li>
            <a href="javascript://" class="btn">Default</a>
        </li>
        <li>
            <a href="javascript://" class="btn btn--shout">Shout Default</a>
        </li>
    </ul>
</div>
<br>
<div class="message">
    <ul class="message__actions message-actions">
        <li class="message-actions__double-text">
            Label <strong>Value</strong>
        </li>
        <li>
            <a href="javascript://" class="btn btn--shout">Shout Default</a>
        </li>
    </ul>
</div>

<div class="bar bar--return">
    <a href="javascript://" class="bar__title">
        Heading 3
    </a>
    <div class="bar__secondary bar-actions">
        <a href="javascript://" class="bar-actions__text">This is action</a>
    </div>
</div>
<br>
<div class="bar">
    <a href="javascript://" class="bar__title">
        Heading 3
    </a>
    <div class="bar__secondary bar-actions">
        <ul class="bar-actions__actions">
            <li>
                <button href="javascript://" class="btn btn--plain btn--icon icon icon-menu-more"></button>
            </li>
            <li>
                <button href="javascript://" class="btn btn--plain btn--icon icon icon-menu-more"></button>
            </li>
            <li>
                <button href="javascript://" class="btn btn--plain btn--icon icon icon-menu-more"></button>
            </li>
        </ul>
    </div>
</div>
<br>
<div class="bar">
    <a href="javascript://" class="bar__title">
        Heading 3
    </a>
    <div class="bar__secondary bar-actions">
        <button href="javascript://" class="bar-actions__button btn">Default</button>
    </div>
</div>

<div class="bar-actions">
    <button href="javascript://" class="bar-actions__button btn">Default</button>
</div>
<br>
<div class="bar-actions">
    <p class="bar-actions__text">This is action</p>
</div>
<br>
<div class="bar-actions">
    <ul class="bar-actions__actions">
        <li>
            <button href="javascript://" class="btn btn--plain btn--icon icon icon-menu-more"></button>
        </li>
        <li>
            <button href="javascript://" class="btn btn--plain btn--icon icon icon-menu-more"></button>
        </li>
        <li>
            <button href="javascript://" class="btn btn--plain btn--icon icon icon-menu-more"></button>
        </li>
    </ul>
</div>

<nav class="breadcrumb">
    <ol>
        <li>
            <a href="javascript://">Home</a>
        </li>
        <li>
            <a href="javascript://">Musik</a>
        </li>
    </ol>
</nav>

<div class="card-actions">
    <div class="card-actions__disturber disturber">-11%</div>
    <a href="javascript://" class="card-actions__secondary btn btn--plain btn--icon icon icon-wishlist"></a>
    <a href="javascript://" class="card-actions__primary btn btn--plain btn--icon icon icon-basket"></a>
</div>
<br>
<form class="card-actions card-actions--extended">
    <div class="card-actions__disturber">
        <span class="disturber">-11%</span>
    </div>
    <a href="javascript://" class="card-actions__secondary btn btn--plain btn--icon icon icon-wishlist"></a>
    <div class="card-actions__quantity quantity quantity--buttons">
        <button value="-" class="quantity__minus">-</button>
        <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
        <button value="+" class="quantity__plus">+</button>
    </div>
    <button class="card-actions__primary btn btn--plain btn--icon icon icon-basket"></button>
</form>
<br>
<form class="card-actions card-actions--extended">
    <div class="card-actions__quantity quantity quantity--buttons">
        <button value="-" class="quantity__minus">-</button>
        <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
        <button value="+" class="quantity__plus">+</button>
    </div>
    <button class="card-actions__primary card-actions__discreet btn btn--plain btn--icon icon icon-menu-more"></button>
    <div class="card-actions__disturber">
        <span class="disturber">-11%</span>
    </div>
</form>
<br>
<form class="card-actions card-actions--extended">
    <div class="card-actions__quantity quantity quantity--buttons">
        <button value="-" class="quantity__minus">-</button>
        <input type="number" class="quantity__widget input__widget" step="0.05" min="0.1" max="" value="1" size="4">
        <button value="+" class="quantity__plus">+</button>
    </div>
    <div class="card-actions__disturber">
        <span class="disturber">-11%</span>
    </div>
</form>
<br>
<div class="card-actions card-actions--extended">
    <div class="card-actions__disturber">
        <span class="disturber">-11%</span>
    </div>
    <a href="javascript://" class="card-actions__primary card-actions__choose-varition">Ausführung wählen</a>
</div>

<div class="card-title card-title--[modifier class]">
    <h4 class="card-title__title">Listing-Title</h4>
</div>
<div class="card-title card-title--two-lines card-title--[modifier class]">
    <h4 class="card-title__title">Main Line <small>Second Line</small></h4>
</div>
<div class="card-title card-title--two-lines card-title--alternate card-title--[modifier class]">
    <h4 class="card-title__title"><small>Second Line</small> Main Line</h4>
</div>
<div class="card-title card-title--icon card-title--[modifier class]">
    <h4 class="card-title__title icon icon-star-outline">Listing-Title</h4>
</div>
<div class="card-title card-title--icon card-title--two-lines card-title--[modifier class]">
    <h4 class="card-title__title icon icon-star-outline">Main Line <small>Second Line</small></h4>
</div>

<ul class="message-actions">
    <li>
        <a href="javascript://" class="btn btn--shout">Shout Default</a>
    </li>
</ul>
<br>
<ul class="message-actions">
    <li>
        <a href="javascript://" class="btn">Default</a>
    </li>
    <li>
        <a href="javascript://" class="btn btn--shout">Shout Default</a>
    </li>
</ul>
<br>
<ul class="message-actions">
    <li class="message-actions__double-text">
        Label <strong>Value</strong>
    </li>
    <li>
        <a href="javascript://" class="btn btn--shout">Shout Default</a>
    </li>
</ul>

<nav class="pagination">
    <ul class="inline-list pagination__list">
        <li><a class="pagination__prev icon icon--only icon-arrow-left" href="javascript://">&lt;</a></li>
        <li><a class="pagination__item" href="javascript://">1</a></li>
        <li><a class="pagination__item" href="javascript://">2</a></li>
        <li><a class="pagination__item" href="javascript://">3</a></li>
        <li><span class="pagination__item pagination__item--current">4</span></li>
        <li><a class="pagination__item" href="javascript://">5</a></li>
        <li><a class="pagination__item" href="javascript://">6</a></li>
        <li><a class="pagination__item" href="javascript://">7</a></li>
        <li><span class="pagination__item pagination__dots">…</span></li>
        <li><a class="pagination__item" href="javascript://">53</a></li>
        <li><a class="pagination__item" href="javascript://">54</a></li>
        <li><a class="pagination__item" href="javascript://">55</a></li>
        <li><a class="pagination__next icon icon--only icon-arrow-right" href="javascript://">&gt;</a></li>
    </ul>
</nav>

<table class="totals-table">
    <tbody>
        <tr>
            <th>Warenwert inkl. MwSt.</th>
            <td>4'220.40</td>
        </tr>
        <tr>
            <th>7.7% Mehrwertsteuer</th>
            <td>324.95</td>
        </tr>
        <tr>
            <th>Versandkosten</th>
            <td>7.60</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Gesamtsumme</th>
            <td>4'228.00</td>
        </tr>
    </tfoot>
</table>

<div class="accordion">
    <div class="accordion__entry accordion__entry--landscape">
        <input type="checkbox" class="accordion__toggle" name="titel-1-b5203" id="titel-1-b5203">
        <label class="accordion__header" for="titel-1-b5203">Titel 1</label>
        <div class="accordion__content">
            <div class="wysiwyg--nowrap accordion__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
            </div>
            <div class="accordion__image">
                <div class="image image--fill image--landscape">
                    <div class="image__image">
                        <img src="images/test-image.jpg">
                    </div>
                    <div class="image__caption">Dies ist eine Bildunterschrift</div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__entry accordion__entry--portrait">
        <input type="checkbox" class="accordion__toggle" name="titel-2-a718c" id="titel-2-a718c">
        <label class="accordion__header" for="titel-2-a718c">Titel 2</label>
        <div class="accordion__content">
            <div class="wysiwyg--nowrap accordion__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
            </div>
            <div class="accordion__image">
                <div class="image image--fill image--portrait" data-enhanced="1">
                    <div class="image__image">
                        <img src="images/test-image.jpg">
                    </div>
                    <div class="image__caption">Dies ist eine Bildunterschrift</div>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__entry accordion__entry--portrait">
        <input type="checkbox" class="accordion__toggle" name="titel-3-5175d" id="titel-3-5175d">
        <label class="accordion__header" for="titel-3-5175d">Titel 3</label>
        <div class="accordion__content">
            <div class="wysiwyg--nowrap accordion__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
            </div>
            <div class="accordion__image">
                <div class="image image--fill image--portrait" data-enhanced="1">
                    <div class="image__image">
                        <img src="images/test-image.jpg">
                    </div>
                    <div class="image__caption">Dies ist eine Bildunterschrift</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="cta">
    <div class="cta__content">
        <h3 class="cta__title">Titel</h3>
        <div class="wysiwyg--nowrap cta__text">
            <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
        </div>
        <a class="cta__action btn btn--shout" href="javascript://">Call to Action</a>
    </div>
    <div class="cta__image">
        <div class="image">
            <div class="image__image">
                <img src="images/test-image.jpg">
            </div>
        </div>
    </div>
</div>
<div class="cta cta--landscape">
    <div class="cta__content">
        <h3 class="cta__title">Titel</h3>
        <div class="wysiwyg--nowrap cta__text">
            <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
        </div>
        <a class="cta__action btn btn--shout" href="javascript://">Call to Action</a>
    </div>
    <div class="cta__image">
        <div class="image image--fill image--landscape">
            <div class="image__image">
                <img src="images/test-image.jpg">
            </div>
        </div>
    </div>
</div>
<div class="cta cta--portrait">
    <div class="cta__content">
        <h3 class="cta__title">Titel</h3>
        <div class="wysiwyg--nowrap cta__text">
            <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
        </div>
        <a class="cta__action btn btn--shout" href="javascript://">Call to Action</a>
    </div>
    <div class="cta__image">
        <div class="image image--fill image--portrait">
            <div class="image__image">
                <img src="images/test-image.jpg">
            </div>
        </div>
    </div>
</div>
<div class="cta cta--square">
    <div class="cta__content">
        <h3 class="cta__title">Titel</h3>
        <div class="wysiwyg--nowrap cta__text">
            <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
        </div>
        <a class="cta__action btn btn--shout" href="javascript://">Call to Action</a>
    </div>
    <div class="cta__image">
        <div class="image image--fill image--square">
            <div class="image__image">
                <img src="images/test-image.jpg">
            </div>
        </div>
    </div>
</div>
<div class="cta cta--square">
    <div class="cta__content">
        <h3 class="cta__title">Titel</h3>
        <div class="wysiwyg--nowrap cta__text">
            <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
        </div>
        <a class="cta__action btn btn--shout" href="javascript://">Call to Action</a>
    </div>
    <div class="cta__image">
        <div class="image image--fill image--square image--circle">
            <div class="image__image">
                <img src="images/test-image.jpg">
            </div>
        </div>
    </div>
</div>

<div class="leri">
    <div class="leri__item leri__item--portrait">
        <div class="leri__content">
            <h3 class="leri__title">Titel 1</h3>
            <div class="wysiwyg--nowrap leri__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </div>
        </div>
        <div class="leri__image">
            <div class="image image--fill image--portrait">
                <div class="image__image">
                    <img src="images/test-image.jpg">
                </div>
                <div class="image__caption">Dies ist eine Bildunterschrift</div>
            </div>
        </div>
    </div>
    <div class="leri__item leri__item--landscape">
        <div class="leri__content">
            <h3 class="leri__title">Titel 1</h3>
            <div class="wysiwyg--nowrap leri__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </div>
        </div>
        <div class="leri__image">
            <div class="image image--fill image--landscape">
                <div class="image__image">
                    <img src="images/test-image.jpg">
                </div>
                <div class="image__caption">Dies ist eine Bildunterschrift</div>
            </div>
        </div>
    </div>
    <div class="leri__item leri__item--landscape">
        <div class="leri__content">
            <h3 class="leri__title">Titel 1</h3>
            <div class="wysiwyg--nowrap leri__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </div>
        </div>
        <div class="leri__image">
            <div class="image image--fill image--landscape">
                <div class="image__image">
                    <img src="images/test-image.jpg">
                </div>
                <div class="image__caption">Dies ist eine Bildunterschrift</div>
            </div>
        </div>
    </div>
    <div class="leri__item leri__item--portrait">
        <div class="leri__content">
            <h3 class="leri__title">Titel 1</h3>
            <div class="wysiwyg--nowrap leri__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </div>
        </div>
        <div class="leri__image">
            <div class="image image--fill image--portrait">
                <div class="image__image">
                    <img src="images/test-image.jpg">
                </div>
                <div class="image__caption">Dies ist eine Bildunterschrift</div>
            </div>
        </div>
    </div>
</div>

<div class="intro intro--has-image intro--[modifier class]">
    <div class="intro__content">
        <h1 class="intro__title">The copy warned the Little Blind Text, that where it came from it would have been rewritten</h1>
        <p class="intro__lead">The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times.</p>
        <p class="intro__text">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
        <div class="intro__actions">
            <a href="javascript://" class="btn">Action 1</a>
            <a href="javascript://" class="btn btn--shout">Action 2</a>
        </div>
    </div>
    <div class="intro__image">
        <div class="image image--fill image--[modifier class]">
            <div class="image__image">
                <img src="images/test-image.jpg">
            </div>
            <div class="image__caption">Dies ist eine Bildunterschrift</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-3">
        <nav class="scrollspy" data-scrollspy="1">
            <a href="#entry-1" class="scrollspy__entry list-group-item">Eintrag 1</a>
            <a href="#entry-2" class="scrollspy__entry list-group-item active">Eintrag 2</a>
            <a href="#entry-3" class="scrollspy__entry list-group-item">Eintrag 3</a>
            <a href="#entry-4" class="scrollspy__entry list-group-item">Eintrag 4</a>
            <a href="#entry-5" class="scrollspy__entry list-group-item">Eintrag 5</a>
            <a href="#entry-6" class="scrollspy__entry list-group-item">Ellenlanger, sehr ausführlicher Eintrag über zwei Zeilen 6</a>
            <a href="#entry-7" class="scrollspy__entry list-group-item">Eintrag 7</a>
            <a href="#entry-8" class="scrollspy__entry list-group-item">Eintrag 8</a>
        </nav>
    </div>
</div>

<div class="timeline">
    <div class="timeline__entry timeline__entry--portrait icon-star-filled">
        <div class="timeline__content">
            <h3 class="timeline__title">Titel 1</h3>
            <div class="wysiwyg--nowrap timeline__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
                <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline</p>
            </div>
        </div>
        <div class="timeline__image">
            <div class="image image--fill image--portrait">
                <div class="image__image">
                    <img src="images/test-image.jpg">
                </div>
                <div class="image__caption">Dies ist eine Bildunterschrift</div>
            </div>
        </div>
    </div>
    <div class="timeline__entry timeline__entry--landscape">
        <div class="timeline__content">
            <h3 class="timeline__title">Titel 2</h3>
            <div class="wysiwyg--nowrap timeline__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
            </div>
        </div>
        <div class="timeline__image">
            <div class="image image--fill image--landscape">
                <div class="image__image">
                    <img src="images/test-image.jpg">
                </div>
                <div class="image__caption">Dies ist eine Bildunterschrift</div>
            </div>
        </div>
    </div>
    <div class="timeline__entry timeline__entry--landscape">
        <div class="timeline__content">
            <h3 class="timeline__title">Titel 3</h3>
            <div class="wysiwyg--nowrap timeline__text">
                <p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again. And if she hasn’t been rewritten, then they are still using her.</p>
            </div>
        </div>
    </div>
</div>

<div class="kss-style"><h6>Product</h6></div>
<div class="slider slider--enhanced" style="width: 370px;">
    <div class="slider__wrap" style="height: 384px;">
        <div class="slider__tape" style="width: auto; right: auto; transform: translateX(0);">
            <div class="row">
                <div class="col-sm-6 col-md-4 col-xl-3" style="width: 270px">
                    <div class="product-card product-card--slider">
                        <a href="javascript://" class="product-card__link">
                            <div class="product-card__image">
                                <div class="image image--square image--fill">
                                    <div class="image__image"><img src="images/test-image.jpg"></div>
                                </div>
                            </div>
                            <div class="product-card__disturber">
                                <span class="disturber">-11%</span>
                            </div>
                            <h4 class="product-card__title">
                                Title
                            </h4>
                        </a>
                        <div class="product-card__price price">
                            <span class="price__amount">69.90</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3" style="width: 270px">
                    <div class="product-card product-card--slider">
                        <a href="javascript://" class="product-card__link">
                            <div class="product-card__image">
                                <div class="image image--square image--fill">
                                    <div class="image__image"><img src="images/test-image.jpg"></div>
                                </div>
                            </div>
                            <div class="product-card__disturber">
                                <span class="disturber">-11%</span>
                            </div>
                            <h4 class="product-card__title">
                                Title
                            </h4>
                        </a>
                        <div class="product-card__price price price--reduced">
                            <span class="price__amount">69.90</span>
                            <span class="price__strikethrough">120.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slider__controls">
        <a class="slider-control__dot slider-control--current" href="javascript://">1</a>
        <a class="slider-control__dot" href="javascript://">2</a>
    </div>
</div>
<div class="kss-style"><h6>Image Gallery</h6></div>
<div class="slider slider--enhanced slider--gallery" style="width: 370px;">
    <div class="slider__wrap" style="height: 180px;">
        <div class="slider__tape" style="width: auto; right: auto; transform: translateX(0);">
            <div class="row">
                <div class="col-sm-6 col-md-4 col-xl-3" style="width: 270px">
                    <div class="image image--landscape image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-xl-3" style="width: 270px">
                    <div class="image image--landscape image--fill">
                        <div class="image__image"><img src="images/test-image.jpg"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slider__controls slider-control">
        <a href="javascript://" class="slider-control__prev">&lt;</a>
        <a href="javascript://" class="slider-control__next">&gt;</a>
    </div>
</div>