Raptus Design Theme

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