Skip to main content

Product placement item

Product placement items represent products and services on the website. On interaction, product placement items navigate to a product detail page for users to purchase, acquire, or learn more about the product or service. They are grouped in a placement group.

Example

Best practices

Use product placement items as part of the user flow for browsing and clicking through to specific products. They are usually used in groups. Clicking on a product placement item 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 placement items lower on the page rather than the top.
  • Do use product placement items to show a group of products of a similar type or theme.
  • Keep the number of lines for headings to two lines (three for the large product placements).
  • Keep the number of lines for paragraphs to four or less lines (six or less for large product placements).

Don’t

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

Also known as

Item template
Placement group

Related

Call to action
Heading
Image
Paragraph
Subheading

Options

  • Context: The context refers to the type of content represented by the product placement item. Product placement items currently support context-acessory, context-app, context-device, context-game, context-software, and context-artist.
  • Badge: Product placement items size medium and greater may optionally have a badge component.
  • Default Images: The default image option adds the ability to use default images for certain product placement contexts and error handling with an image fallback. This option requires a div with the class f-default-image to wrap the picture element and onerror events on the image tag.
  • Style: Product placement items support a clean state, which removes the border on default image types. Use the clean option by adding a class of f-clean to the product placement item.
  • Size: Product placement items support multiple sizes. Use the size classes f-size-small, f-size-medium, and f-size-large to access these different sizes. Please note, not all sizes are availble for all contexts. Please refer to the support table below:
Size Accessory App Device Game Software Artist
Small - X - X - X
Medium X X X X X X
Large X - X - X -

Development

Code and preview

Type: App (small)

Three boxes in a square with grey background

Heading

Community rating: 4/5

$ 20
<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">20</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
        </div>
    </a>
</section>

Type: App without default image (small)

Placeholder with grey background and dimension watermark without any imagery

Heading

Community rating: 4/5

$ 20
<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">20</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
        </div>
    </a>
</section>

Clean (no outline on rest)

Illustrated outline of a person over grey background

Heading

<section class="m-product-placement-item context-artist f-size-small f-clean" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <div class="f-default-image">
            <picture>
                <source srcset="/images/content-images/artist-glyph-default-small.png" media="(min-width:0)">
                <img class="c-image" srcset="/images/content-images/artist-glyph-default-small.png" src="/images/content-images/artist-glyph-default-small.png" alt="Illustrated outline of a person over grey background" onerror="handleImgError(this, 'small')">
            </picture>
        </div>
        <div>
            <h3 class="c-heading" itemprop="product name">Heading</h3>
        </div>
    </a>
</section>

Type: Game (medium)

White frame with mountain landscape illustrated in white on a grey background
BADGE

Heading EE

Community rating: 4/5

$ 1,000
<section class="m-product-placement-item context-game f-size-medium" 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: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, 'medium')">
            </picture>
        </div>
        <div>
            <strong class="c-badge f-small f-highlight">BADGE</strong>
            <h3 class="c-heading" itemprop="product name">
                <span>Heading</span>
                <span class="c-explicit" aria-label="This product contains explicit content">
                    <span>E</span>
                    <span>E</span>
                </span>
            </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>

Type: Game without default image (medium)

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

Community rating: 4/5

$ 1,000
<section class="m-product-placement-item context-game 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>
            <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">1,000</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
        </div>
    </a>
</section>

Type: Device (large)

White frame with mountain landscape illustrated in white on a grey background
BADGE

Heading

Community rating: 4/5

$ 1,399

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<section class="m-product-placement-item context-device f-size-large" 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, '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">1,399</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </a>
</section>

Type: Device without default image (large)

Placeholder with grey background, dimension watermark and without any imagery
BADGE

Heading

Community rating: 4/5

$ 1,399

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<section class="m-product-placement-item context-device 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, dimension watermark and 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">1,399</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </a>
</section>

Flex (fill the available space)

White frame with mountain landscape illustrated in white on a grey background
BADGE

Heading

Community rating: 4/5

$ 1,000
<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>
            <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">1,000</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
        </div>
    </a>
</section>

Type: Artist (small)

Illustrated outline of a person over grey background

Heading

<section class="m-product-placement-item context-artist f-size-small" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <div class="f-default-image">
            <picture>
                <source srcset="/images/content-images/artist-glyph-default-small.png" media="(min-width:0)">
                <img class="c-image" srcset="/images/content-images/artist-glyph-default-small.png" src="/images/content-images/artist-glyph-default-small.png" alt="Illustrated outline of a person over grey background" onerror="handleImgError(this, 'small')">
            </picture>
        </div>
        <div>
            <h3 class="c-heading" itemprop="product name">Heading</h3>
        </div>
    </a>
</section>

Type: Artist without default image (small)

Placeholder with grey background and dimension watermark without any imagery

Heading

<section class="m-product-placement-item context-artist 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>
    </a>
</section>

Type: Artist (medium)

Illustrated outline of a person over grey background
BADGE

Heading

<section class="m-product-placement-item context-artist f-size-medium" 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, 'medium')">
            </picture>
        </div>
        <div>
            <strong class="c-badge f-small f-highlight">BADGE</strong>
            <h3 class="c-heading" itemprop="product name">Heading</h3>
        </div>
    </a>
</section>

Type: Artist without default image (medium)

Placeholder with grey background and dimension watermark without any imagery
BADGE

Heading

<section class="m-product-placement-item context-artist 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>
            <strong class="c-badge f-small f-highlight">BADGE</strong>
            <h3 class="c-heading" itemprop="product name">Heading</h3>
        </div>
    </a>
</section>

Type: Artist (flex)

Illustrated outline of a person over grey background
BADGE

Heading

<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>
            <strong class="c-badge f-small f-highlight">BADGE</strong>
            <h3 class="c-heading" itemprop="product name">Heading</h3>
        </div>
    </a>
</section>

Type: Movie (small)

Illustration of a film strip over a grey background

Heading EE

Not yet rated

Free
<section class="m-product-placement-item context-movie f-size-small" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <div class="f-default-image">
            <picture>
                <source srcset="/images/content-images/movie-glyph-default-small.png" media="(min-width:0)">
                <img class="c-image" srcset="/images/content-images/movie-glyph-default-small.png" src="/images/content-images/movie-glyph-default-small.png" alt="Illustration of a film strip over a grey background" onerror="handleImgError(this, 'small')">
            </picture>
        </div>
        <div>
            <h3 class="c-heading" itemprop="product name">
                <span>Heading</span>
                <span class="c-explicit" aria-label="This product contains explicit content">
                    <span>E</span>
                    <span>E</span>
                </span>
            </h3>
            <div class="c-rating" data-value="0" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Not yet rated</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>

Type: Movie without default image (small)

Placeholder image

Heading

Not yet rated

Free
<section class="m-product-placement-item context-movie f-size-small" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <picture>
            <source srcset="http://placehold.it/72x103" media="(min-width:0)">
            <img class="c-image" srcset="http://placehold.it/72x103" src="http://placehold.it/72x103" alt="Placeholder image">
        </picture>
        <div>
            <h3 class="c-heading" itemprop="product name">Heading</h3>
            <div class="c-rating" data-value="0" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Not yet rated</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>

Type: Movie (medium)

Illustration of a film strip over a grey background
BADGE

Heading

Not yet rated

Free
<section class="m-product-placement-item context-movie f-size-medium" 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, 'medium')">
            </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="0" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Not yet rated</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>

Type: Movie without default image (medium)

Placeholder image
BADGE

Heading

Not yet rated

Free
<section class="m-product-placement-item context-movie f-size-medium" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <picture>
            <source srcset="http://placehold.it/124x170" media="(min-width:0)">
            <img class="c-image" srcset="http://placehold.it/124x170" src="http://placehold.it/124x170" alt="Placeholder image">
        </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="0" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Not yet rated</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>

Type: Movie (flex)

Illustration of a film strip over a grey background
BADGE

Heading

Not yet rated

Free
<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>
            <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="0" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Not yet rated</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>

Type: TV Show (small)

White frame with mountain landscape illustrated in white on a grey background

Heading

Community rating: 4/5

$ 5.99
<section class="m-product-placement-item context-tvshow f-size-small" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <div class="f-default-image">
            <picture>
                <source srcset="/images/content-images/generic-glyph-default-small.png" media="(min-width:0)">
                <img class="c-image" srcset="/images/content-images/generic-glyph-default-small.png" src="/images/content-images/generic-glyph-default-small.png" alt="White frame with mountain landscape illustrated in white on a grey background" onerror="handleImgError(this, 'small')">
            </picture>
        </div>
        <div>
            <h3 class="c-heading" itemprop="TV show 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">5.99</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
        </div>
    </a>
</section>

Type: TV Show without default image (small)

Placeholder image

Heading

Community rating: 4/5

$ 5.99
<section class="m-product-placement-item context-tvshow f-size-small" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <picture>
            <source srcset="http://placehold.it/72x72/b2b2b2/ffffff" media="(min-width:0)">
            <img class="c-image" srcset="http://placehold.it/72x72/b2b2b2/ffffff" src="http://placehold.it/72x72/b2b2b2/ffffff" alt="Placeholder image">
        </picture>
        <div>
            <h3 class="c-heading" itemprop="TV show 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">5.99</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
        </div>
    </a>
</section>

Type: TV Show (medium)

White frame with mountain landscape illustrated in white on a grey background
BADGE

Heading

Metadata

Community rating: 4/5

$ 5.99
<section class="m-product-placement-item context-tvshow f-size-medium" 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: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, 'medium')">
            </picture>
        </div>
        <div>
            <strong class="c-badge f-small f-highlight">BADGE</strong>
            <h3 class="c-heading" itemprop="TV show name">Heading</h3>
            <span class="c-meta-text">Metadata</span>
            <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>

Type: TV Show without default image (medium)

Placeholder image
BADGE

Heading

Metadata

Community rating: 4/5

$ 5.99
<section class="m-product-placement-item context-tvshow f-size-medium" itemscope itemtype="http://schema.org/Product">
    <a href="#">
        <picture>
            <source srcset="http://placehold.it/124x124/b2b2b2/ffffff" media="(min-width:0)">
            <img class="c-image" srcset="http://placehold.it/124x124/b2b2b2/ffffff" src="http://placehold.it/124x124/b2b2b2/ffffff" alt="Placeholder image">
        </picture>
        <div>
            <strong class="c-badge f-small f-highlight">BADGE</strong>
            <h3 class="c-heading" itemprop="TV show name">Heading</h3>
            <span class="c-meta-text">Metadata</span>
            <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>

Type: TV Show (flex)

White frame with mountain landscape illustrated in white on a grey background
BADGE

Heading

Metadata

Community rating: 4/5

$ 5.99
<section class="m-product-placement-item context-tvshow 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>
            <strong class="c-badge f-small f-highlight">BADGE</strong>
            <h3 class="c-heading" itemprop="TV show name">Heading</h3>
            <span class="c-meta-text">Metadata</span>
            <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>

Type: Video without default image (large)

Placeholder with grey background and dimension watermark without any imageryPlay BADGE

Title

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