c-product-list

Code
<div class="c-product-list">
    <ul class="c-product-list__items">
        <li class="c-product-list__item">
            <section class="c-product">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb1.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 1</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Umax VisionBook 14We Plus UMM23014E</a>
                            </h3>
                            <ul class="c-product__stats c-pipe-list is-available">
                                <li class="c-pipe-list__item">
                                    <a class="c-product__rating c-product__link" href="#review">
                                        <div class="c-rating-widget u-color-highlight"><span class="c-rating-widget__value">95 %</span><svg class="c-rating-widget__stars c-rating" aria-hidden="true"><g clip-path="url(#clips-rating)"><rect class="c-rating__backdrop" width="100%" height="100%"></rect><rect class="c-rating__value" width="95%" height="100%"></rect></g></svg></div>
                                    </a>
                                </li>
                                <li class="c-pipe-list__item">
                                    <a class="c-product__review-count c-product__link" href="#review">13 recenzí</a>
                                </li>
                            </ul>
                            <ul class="c-product__params c-simple-list">
                                <li class="c-simple-list__item" title="Úhlopříčka displeje">14.1 palce</li>
                                <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                                <li class="c-simple-list__item" title="Procesor">Intel Atom</li>
                                <li class="c-simple-list__item" title="Frekvence procesoru">1 GHz</li>
                                <li class="c-simple-list__item" title="Velikost operační paměti">4 GB</li>
                                <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                            </ul>
                            <p class="c-product__desc o-line-wrap">Kompaktní notebook navržený pro cestování, práci i zábavu. 14.1 Full HD IPS displej s rozlišením 1920 x 1080 bodů, 4jádrový procesor Intel Atom x5 E8000 (1.04GHz), 4GB operační...</p>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">4&nbsp;990 – 6&nbsp;031&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 4 obchodech</a>
                            </div>
                            <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Umax VisionBook 14We Plus UMM23014E</a>
            </section>
        </li>
        <li class="c-product-list__item">
            <section class="c-product">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb2.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 2</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Apple MacBook Air 2017 MQD32CZ/A</a>
                            </h3>
                            <ul class="c-product__stats c-pipe-list is-available">
                                <li class="c-pipe-list__item">
                                    <a class="c-product__rating c-product__link" href="#review">
                                        <div class="c-rating-widget u-color-highlight"><span class="c-rating-widget__value">94 %</span><svg class="c-rating-widget__stars c-rating" aria-hidden="true"><g clip-path="url(#clips-rating)"><rect class="c-rating__backdrop" width="100%" height="100%"></rect><rect class="c-rating__value" width="94%" height="100%"></rect></g></svg></div>
                                    </a>
                                </li>
                                <li class="c-pipe-list__item">
                                    <a class="c-product__review-count c-product__link" href="#review">101 recenzí</a>
                                </li>
                            </ul>
                            <ul class="c-product__params c-simple-list">
                                <li class="c-simple-list__item" title="Úhlopříčka displeje">13.3 palce</li>
                                <li class="c-simple-list__item" title="Rozlišení displeje">1440 x 900</li>
                                <li class="c-simple-list__item" title="Procesor">Intel Core i5</li>
                                <li class="c-simple-list__item" title="Frekvence procesoru">1.8 GHz</li>
                                <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                                <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                            </ul>
                            <p class="c-product__desc o-line-wrap">Zakuste pravou svobodu s hliníkovým notebookem disponujícím až 12hodinovou výdrží na jedno nabití. Přestože je tenký, lehký a úsporný, ukrývá dvoujádrový výkon a bleskový SSD disk.</p>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">20&nbsp;621 – 32&nbsp;599&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 30 obchodech</a>
                            </div>
                            <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle is-active">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Odebrat z porovnání</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Apple MacBook Air 2017 MQD32CZ/A</a>
            </section>
        </li>
        <li class="c-product-list__item">
            <section class="c-product">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb3.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 3</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Apple MacBook Pro 13 Touch Bar 2019 MUHN2CZ/A</a>
                            </h3>
                            <ul class="c-product__stats c-pipe-list is-available">
                                <li class="c-pipe-list__item">
                                    <a class="c-product__rating c-product__link" href="#review">
                                        <div class="c-rating-widget u-color-highlight"><span class="c-rating-widget__value">100 %</span><svg class="c-rating-widget__stars c-rating" aria-hidden="true"><g clip-path="url(#clips-rating)"><rect class="c-rating__backdrop" width="100%" height="100%"></rect><rect class="c-rating__value" width="100%" height="100%"></rect></g></svg></div>
                                    </a>
                                </li>
                                <li class="c-pipe-list__item">
                                    <a class="c-product__review-count c-product__link" href="#review">3 recenze</a>
                                </li>
                            </ul>
                            <ul class="c-product__params c-simple-list">
                                <li class="c-simple-list__item" title="Úhlopříčka displeje">13.3 palce</li>
                                <li class="c-simple-list__item" title="Rozlišení displeje">2560 x 1600</li>
                                <li class="c-simple-list__item" title="Procesor">Intel Core i5</li>
                                <li class="c-simple-list__item" title="Frekvence procesoru">1.4 GHz</li>
                                <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                                <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                            </ul>
                            <p class="c-product__desc o-line-wrap">Ať už máte na svůj notebook jakékoliv požadavky, MacBook Pro z ročníku 2019 předčí všechna očekávání a svými neuvěřitelnými schopnostmi vás bude zas a znovu překvapovat. </p>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">30&nbsp;998 – 40&nbsp;996&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 43 obchodech</a>
                            </div>
                            <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Apple MacBook Pro 13 Touch Bar 2019 MUHN2CZ/A</a>
            </section>
        </li>
    </ul>
</div>

c-product-list c-product-list--grid

Code
<div class="c-product-list c-product-list--grid">
    <ul class="c-product-list__items o-grid o-grid--continuous">
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb4.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 1</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Dámské domácí šaty s krátkým rukávem Proužek azurová tmavě modrá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">259 – 373&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 43 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Dámské domácí šaty s krátkým rukávem Proužek azurová tmavě modrá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb5.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 2</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Numoco dámské šaty 98-1 tmavě modrá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">749 – 1&nbsp;090&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 3 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle is-active">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Odebrat z porovnání</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Numoco dámské šaty 98-1 tmavě modrá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#exit" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb6.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 3</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#exit">CityGoddess dámské šaty květinové Chloe DR1261 barevná šedá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">1&nbsp;320&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#exit">v stensport.cz</a>
                            </div>
                            <a href="#detail" class="c-product__secondary-cta c-product__link">Detail produktu</a>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#exit" class="c-product__overlay-link">CityGoddess dámské šaty květinové Chloe DR1261 barevná šedá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb7.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Kixmi dámské šaty Juditta tmavě modrá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">528&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 13 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Kixmi dámské šaty Juditta tmavě modrá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb8.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Esmara midi šaty černá</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">249&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 12 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Esmara midi šaty černá</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb9.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--ad">Hit</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Dámské košilové šaty SK28 ZOiO broskvová</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">522 – 626&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">v 7 obchodech</a>
                            </div>
                            <p class="c-product__sponsored">Sponzorováno</p>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Dámské košilové šaty SK28 ZOiO broskvová</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb10.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Esmara dámské šaty celoplošný potisk růžová</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">249&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 2 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Porovnat</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Esmara dámské šaty celoplošný potisk růžová</a>
            </section>
        </li>
        <li class="c-product-list__item o-grid__item">
            <section class="c-product c-product--compact">
                <a href="#detail" class="c-product__image-link">
                    <img src="styleguide/img/product-list/thumb11.jpg" class="c-product__image" loading="lazy" role="presentation">
                </a>
                <div class="c-product__container">
                    <div class="c-product__info">
                        <div class="c-product__content">
                            <ul class="c-product__badges is-available">
                                <li class="e-badge e-badge--top">Top 8</li>
                            </ul>
                            <h3 class="c-product__title">
                                <a class="c-product__link" href="#detail">Dámské maxi šaty s páskem 1548 cihlová červená</a>
                            </h3>
                        </div>
                        <div class="c-product__actions o-block-list">
                            <div class="c-product__offers o-block-list o-block-list--snug">
                                <a class="c-product__price" href="#detail">149 – 179&nbsp;</a>
                                <a class="c-product__shops c-product__link" href="#detail">ve 4 obchodech</a>
                            </div>
                        </div>
                    </div>
                    <ul class="c-product__additional-actions">
                        <li class="c-product__compare">
                            <button type="button" class="e-action e-action--subtle is-active">
                                <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                                <span>Odebrat z porovnání</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <a href="#detail" class="c-product__overlay-link">Dámské maxi šaty s páskem 1548 cihlová červená</a>
            </section>
        </li>
    </ul>
</div>