Products

Product List Items

%
Place product name here
  • Width: 90 cm
  • Length: 200 cm
  • Height: 35 cm
Basic
Testwinner
Place product name here
  • 100% cotton
  • Wash 60°C
  • Size: 50x90 cm
Gold
Only in store
Place product name here
  • Width: 90 cm
  • Height: 82 cm
  • Depth: 55 cm
Gold

HTML5
To create a product list item, insert the following code where you want it displayed.
To get the styling as displayed under the content tab, you will have to include all the class's as listed below.

You can add more product items by copying everything inside the <!-- Product Item START --> and till the end.

<div class="products">
    <div class="row">

        <!-- Product Item START --> 
        <div class="col-xs-12 col-ms-6 col-sm-6 col-md-4">
            <div class="item product">
                <figure class="product-image">
                    
                        <div class="product-on-offer">
                            <div class="product-on-offer-elements">
                                <span>%</span>
                                <svg class="icon-jysk-splash"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/icons/icons.svg#icon-jysk-splash"></use></svg>
                            </div>
                        </div>
                    
                    <div class="rating">
                        <span class="full"></span>
                        <span class="full"></span>
                        <span class="full"></span>
                        <span class="half"></span>
                        <span class="none"></span>
                    </div>
                    <a href="#" title="">
                        <img src="images/product-image.png" alt="" class="img-responsive">
                    </a>
                </figure>
                <div class="product-content">
                    <a href="product.html" title="">
                        <span class="product-name">Place product name here</span>
                    </a>
                    <div class="list-controller">
                        <ul class="product-description-bullets">
                            <li>Width: 90 cm</li>
                            <li>Length: 200 cm</li>
                            <li>Height: 35 cm</li>
                        </ul>
                    </div>
                    <div class="product-stickers">
                        <div class="product-sticker basic">Basic</div>
                        <div class="product-sticker test-winner">Testwinner</div>
                    </div>
                    <div class="product-footer">
                        <div class="product-price-details">
                            <!-- Product price support must be present in HTML even if empty to maintain equal height product cards -->
                            <span class="product-price-support price-before">
                                    before: 14995,-
                            </span>
                            <!-- Product price -->
                            <span class="product-price offer"> 12395,-</span>
                        </div>
                        <button class="btn secondary quick-view">Quick view</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Product Item END -->

    </div>
</div>

Suggested Product Items

HTML5
To create a suggested product item, insert the following code where you want it displayed.
To get the styling as displayed under the content tab, you will have to include all the class's as listed below.

You can add more product items by copying everything inside the <!-- Product Item START --> and till the end.

<div class="row">
    <div class="products small product-carousel">

        <!-- Product Item START --> 
        <div class="col-xs-12 col-ms-6 col-sm-6 col-md-4">
            <div class="item product">
                <figure class="product-image">
                        <div class="product-on-offer">
                            <div class="product-on-offer-elements">
                                <span>%</span>
                                <svg class="icon-jysk-splash"><use xlink:href="images/icons/icons.svg#icon-jysk-splash"></use></svg>
                            </div>
                        </div>
                    <a href="#" title="">
                        <img src="images/product-image.png" alt="" class="img-responsive">
                    </a>
                </figure>
                <div class="product-content">
                    <a href="product.html" title="">
                        <span class="product-name">Place product name here</span>
                    </a>
                    <div class="product-footer">
                        <div class="product-price-details">
                            <!-- Product price support must be present in HTML even if empty to maintain equal height product cards -->
                            <span class="product-price-support price-before">
                            Before: 14995,-
                            </span>
                            <!-- Product price -->
                            <span class="product-price offer">1 pc. 12395,-</span>
                        </div>
                        <button class="btn primary">Add to basket</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Product Item END --> 

    </div>
</div>

Last Viewed Product Items

HTML5
To create a last viewed product item, insert the following code where you want it displayed.
To get the styling as displayed under the content tab, you will have to include all the class's as listed below.

You can add more product items by copying everything inside the <!-- Product Item START --> and till the end.

<div class="recently-viewed-products">    
    <div class="products small product-carousel">
        <!-- Item loop with data from _global.json -->
        
        <div class="row">
        
        <!-- Product item START-->
            <div class="col-xs-12 col-ms-6 col-sm-6 col-md-4">
                <div class="item product">
                    <figure class="product-image">
                        
                            <div class="product-on-offer">
                                <div class="product-on-offer-elements">
                                    <span>%</span>
                                    <svg class="icon-jysk-splash"><use xlink:href="images/icons/icons.svg#icon-jysk-splash"></use></svg>
                                </div>
                            </div>
                        
                        <a href="product.html" title="">
                            <img src="images/product-image.png" alt="" class="img-responsive">
                        </a>
                    </figure>
                    <div class="product-content">
                        <a href="product.html" title="">
                            <span class="product-name">Place product name here</span>
                        </a>
                        <div class="product-footer">
                            <div class="product-price-details">
                                <!-- Product price support must be present in HTML even if empty to maintain equal height product cards -->
                                <span class="product-price-support price-before">Before: 14995,-</span>
                                <!-- Product price -->
                                <span class="product-price offer">1 pc. 12395,-</span>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
            <!-- Product item END-->

        </div>
    </div>
</div>

Hot-Spot Product Items

+
Madras 90x200 Høie 200 Box

HTML5
To create a hot-spot product item, insert the following code where you want it displayed.
To get the styling as displayed under the content tab, you will have to include all the class's as listed below.

<!-- Hotspot example START -->
<div class="hotspot">
    <div class="hotspot-trigger">+</div>
    <div class="hotspot-ring"></div>
   
    <div class="hotspot-content">
        <div class="products small">
            <div class="product">
                <figure class="product-image">
                    <a href="product.html" title="">
                        <img src="images/product-image.png" alt="" class="img-responsive">
                    </a>
                </figure>
                <div class="product-content">
                    <a href="#" title="">
                        <span class="product-name">Madras 90x200 Høie 200 Box</span>
                    </a>
                    <div class="product-footer">
                        <div class="product-price-details">
                            <!-- Product price support must be present in HTML even if empty to maintain equal height product cards -->
                            <span class="product-price-support">Before: 9999,-</span>
                            <!-- Product price -->
                            <span class="product-price offer">Pr. unit 99999,-</span>
                            <div class="hotspot-add-to-basket">
                                <svg class="icon-cart"><use xlink:href="images/icons/icons.svg#icon-cart"></use></svg>
                            </div>
                        </div>
                        <button class="button primary">Se mere</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End hotspot END -->