Skip to main content

Product placement

Product placements represent products and services on the website. On interaction, product placements navigate to a product detail page for users to purchase, acquire, or learn more about the product or service.

Example

Best practices

Use product placement as part of the user flow for browsing and clicking through to specific products. They are used in groups. Clicking on a product placement always leads to a product detail page, where the user can buy the product.

Do

  • See the Design Toolkit for a recommendation of what typically goes inside each type of placement. For example, a device placement, apps & software placement, and news placement each tend to have slightly different content and layout.
  • In general, put product placements lower on the page rather than the top.
  • Do use product placements to show a group of products of a similar type or theme.

Don’t

  • Don’t use brightly colored backgrounds for physical goods product placements.
  • Don’t use large images within a placement.

Also known as

Item template
Placement group

Related

Call to action
Heading
Image
Paragraph
Subheading

Development

  • Schema definition: The product-placement schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Single row - large product placement with default images

<div class="m-product-placement f-software" data-grid="col-12">
    <div class="c-carousel f-single-slide" role="region" aria-label="">
        <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
        <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
        <div itemscope itemtype="http://schema.org/ItemList">
            <ul class="c-group">
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <picture>
                                <source srcset="http://placehold.it/272x223" media="(min-width:0)">
                                <img class="c-image" srcset="http://placehold.it/272x223" src="http://placehold.it/272x223" alt="Placeholder with grey background and dimension watermark without any imagery">
                            </picture>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet turpis ut nibh varius, eget blandit sem blandit.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-software f-size-large" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'large')">
                                </picture>
                            </div>
                            <div>
                                <strong class="c-badge f-small f-highlight">BADGE</strong>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">500</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph">Lorem ipsum dolor sit amet.</p>
                            </div>
                        </a>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Single row - medium product placement with default images

<div class="m-product-placement f-app" data-grid="col-12">
    <div class="c-carousel f-single-slide" role="region" aria-label="">
        <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
        <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
        <div itemscope itemtype="http://schema.org/ItemList">
            <ul class="c-group">
                <li>
                    <section class="m-product-placement-item context-app f-size-medium" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <picture>
                                <source srcset="http://placehold.it/124x124" media="(min-width:0)">
                                <img class="c-image" srcset="http://placehold.it/124x124" src="http://placehold.it/124x124" alt="Placeholder with grey background and dimension watermark without any imagery">
                            </picture>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Pin more</h3>
                                <div class="c-rating" data-value="5" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">5</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">2.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-medium" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'medium')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Sway</h3>
                                <div class="c-rating" data-value="4.5" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4.5</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <span itemprop="price">Free</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-medium" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'medium')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Player for Soundcloud</h3>
                                <div class="c-rating" data-value="5" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">5</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <span itemprop="price">Free</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-medium" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'medium')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Allthecooks Recipes</h3>
                                <div class="c-rating" data-value="4.5" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4.5</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <span itemprop="price">Free</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-medium" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'medium')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Photo Editor</h3>
                                <div class="c-rating" data-value="4.5" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4.5</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-medium" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'medium')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">NFL on Windows</h3>
                                <div class="c-rating" data-value="4.5" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4.5</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <span itemprop="price">Free</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-medium" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'medium')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Audiobooks from Audible</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Multi row - small product placement with default images

<div class="m-product-placement f-app" data-grid="col-12">
    <div class="c-carousel f-single-slide" role="region" aria-label="">
        <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
        <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
        <div itemscope itemtype="http://schema.org/ItemList">
            <ul class="c-group">
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <picture>
                                <source srcset="http://placehold.it/72x72" media="(min-width:0)">
                                <img class="c-image" srcset="http://placehold.it/72x72" src="http://placehold.it/72x72" alt="Placeholder with grey background and dimension watermark without any imagery">
                            </picture>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                    <section class="m-product-placement-item context-app f-size-small" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-small.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-small.png" src="/images/content-images/app-glyph-default-small.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'small')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="product name">Heading</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">1,000</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Horizontal video product placement

<div class="m-product-placement f-video" data-grid="col-12">
    <div class="c-carousel f-single-slide" role="region" aria-label="">
        <button class="c-flipper f-previous" aria-hidden="true" tabindex="-1"></button>
        <button class="c-flipper f-next" aria-hidden="true" tabindex="-1"></button>
        <div itemscope itemtype="http://schema.org/ItemList">
            <ul class="c-group">
                <li>
                    <section class="m-product-placement-item context-video f-size-large" itemscope itemtype="http://schema.org/Product">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:768px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:540px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:0)">
                            <img srcset="http://placehold.it/272x153/b2b2b2/ffffff" src="http://placehold.it/272x153/b2b2b2/ffffff" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-action-trigger c-glyph glyph-play" href="#" aria-label="Play">
                            <span class="x-screen-reader">Play</span>
                        </a>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h2 class="c-heading-5" itemprop="Video title">Title</h2>
                        <span class="c-meta-text">Metadata</span>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-video f-size-large" itemscope itemtype="http://schema.org/Product">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:768px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:540px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:0)">
                            <img srcset="http://placehold.it/272x153/b2b2b2/ffffff" src="http://placehold.it/272x153/b2b2b2/ffffff" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-action-trigger c-glyph glyph-play" href="#" aria-label="Play">
                            <span class="x-screen-reader">Play</span>
                        </a>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h2 class="c-heading-5" itemprop="Video title">Title</h2>
                        <span class="c-meta-text">Metadata</span>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-video f-size-large" itemscope itemtype="http://schema.org/Product">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:768px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:540px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:0)">
                            <img srcset="http://placehold.it/272x153/b2b2b2/ffffff" src="http://placehold.it/272x153/b2b2b2/ffffff" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-action-trigger c-glyph glyph-play" href="#" aria-label="Play">
                            <span class="x-screen-reader">Play</span>
                        </a>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h2 class="c-heading-5" itemprop="Video title">Title</h2>
                        <span class="c-meta-text">Metadata</span>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-video f-size-large" itemscope itemtype="http://schema.org/Product">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:768px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:540px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:0)">
                            <img srcset="http://placehold.it/272x153/b2b2b2/ffffff" src="http://placehold.it/272x153/b2b2b2/ffffff" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-action-trigger c-glyph glyph-play" href="#" aria-label="Play">
                            <span class="x-screen-reader">Play</span>
                        </a>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h2 class="c-heading-5" itemprop="Video title">Title</h2>
                        <span class="c-meta-text">Metadata</span>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-video f-size-large" itemscope itemtype="http://schema.org/Product">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:768px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:540px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:0)">
                            <img srcset="http://placehold.it/272x153/b2b2b2/ffffff" src="http://placehold.it/272x153/b2b2b2/ffffff" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-action-trigger c-glyph glyph-play" href="#" aria-label="Play">
                            <span class="x-screen-reader">Play</span>
                        </a>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h2 class="c-heading-5" itemprop="Video title">Title</h2>
                        <span class="c-meta-text">Metadata</span>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-video f-size-large" itemscope itemtype="http://schema.org/Product">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:768px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:540px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:0)">
                            <img srcset="http://placehold.it/272x153/b2b2b2/ffffff" src="http://placehold.it/272x153/b2b2b2/ffffff" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-action-trigger c-glyph glyph-play" href="#" aria-label="Play">
                            <span class="x-screen-reader">Play</span>
                        </a>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h2 class="c-heading-5" itemprop="Video title">Title</h2>
                        <span class="c-meta-text">Metadata</span>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-video f-size-large" itemscope itemtype="http://schema.org/Product">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/358x201/b2b2b2/ffffff" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:768px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:540px)">
                            <source srcset="http://placehold.it/272x153/b2b2b2/ffffff" media="(min-width:0)">
                            <img srcset="http://placehold.it/272x153/b2b2b2/ffffff" src="http://placehold.it/272x153/b2b2b2/ffffff" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-action-trigger c-glyph glyph-play" href="#" aria-label="Play">
                            <span class="x-screen-reader">Play</span>
                        </a>
                        <strong class="c-badge f-small f-highlight">BADGE</strong>
                        <h2 class="c-heading-5" itemprop="Video title">Title</h2>
                        <span class="c-meta-text">Metadata</span>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Product placement module with flex treatment

<div class="m-product-placement" data-js-flex="true" data-grid="col-12">
    <div class="c-carousel f-single-slide" role="region" aria-label="">
        <button class="c-flipper f-previous" aria-label="View previous"></button>
        <button class="c-flipper f-next" aria-label="View next"></button>
        <div itemscope itemtype="http://schema.org/ItemList">
            <ul class="c-group">
                <li>
                    <section class="m-product-placement-item context-game f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/generic-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/generic-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/generic-glyph-default-large.png" src="/images/content-images/generic-glyph-default-large.png" alt="White frame with mountain landscape illustrated in white on a grey background"
                                        onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="Game name">Game name</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">5.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-device f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/generic-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/generic-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/generic-glyph-default-large.png" src="/images/content-images/generic-glyph-default-large.png" alt="White frame with mountain landscape illustrated in white on a grey background"
                                        onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="Device name">Device name</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">5.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                                <p class="c-paragraph"></p>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-app f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/app-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/app-glyph-default-large.png" src="/images/content-images/app-glyph-default-large.png" alt="Three boxes in a square with grey background" onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="App name">App name</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">5.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-artist f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/artist-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/artist-glyph-default-large.png" src="/images/content-images/artist-glyph-default-large.png" alt="Illustrated outline of a person over grey background" onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="Artist name">Artist name</h3>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-movie f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/movie-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/movie-glyph-default-large.png" src="/images/content-images/movie-glyph-default-large.png" alt="Illustration of a film strip over a grey background" onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="Movie name">Movie name</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">5.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-movie f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/movie-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/movie-glyph-default-large.png" src="/images/content-images/movie-glyph-default-large.png" alt="Illustration of a film strip over a grey background" onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="Movie name">Movie name</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">5.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-game f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/generic-glyph-default-large.png" media="(min-width:540px)">
                                    <source srcset="/images/content-images/generic-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/generic-glyph-default-large.png" src="/images/content-images/generic-glyph-default-large.png" alt="White frame with mountain landscape illustrated in white on a grey background"
                                        onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="Game name">Game name</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">5.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
                <li>
                    <section class="m-product-placement-item context-movie f-size-flex" itemscope itemtype="http://schema.org/Product">
                        <a href="#">
                            <div class="f-default-image">
                                <picture>
                                    <source srcset="/images/content-images/movie-glyph-default-large.png" media="(min-width:0)">
                                    <img class="c-image" srcset="/images/content-images/movie-glyph-default-large.png" src="/images/content-images/movie-glyph-default-large.png" alt="Illustration of a film strip over a grey background" onerror="handleImgError(this, 'flex')">
                                </picture>
                            </div>
                            <div>
                                <h3 class="c-heading" itemprop="Movie name">Movie name</h3>
                                <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                                    <p class="x-screen-reader">Community rating:
                                        <span itemprop="ratingValue">4</span>/
                                        <span itemprop="bestRating">5</span>
                                    </p>
                                    <div></div>
                                </div>
                                <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                    <meta itemprop="priceCurrency" content="USD">
                                    <span>$</span>
                                    <span itemprop="price">5.99</span>
                                    <link itemprop="availability" href="http://schema.org/InStock">
                                </div>
                            </div>
                        </a>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>