Skip to main content

Hero item

A hero item showcases key content as well as the primary action on the page. It often appears at the top of the page immediately following the header and always extends across the full content area. It may contain other components and can be wrapped in a carousel if more than one hero item is desired.

Transparent header requirements: A class of f-transparent is required on any hero-item being used with a transparent header. Images should be 16:9 aspect ratio and the exact image sizes can be found in the transparent hero-item example below.

Example

picture of Xbox One S on white background

Introducing the new Xbox One S

Sleeker. Slimmer. Sharper.

$ 399
Device hero with a left center layout on a light theme

Best practices

Use hero item when you want to prominently showcase key content on pages. The hero can represent similar content as feature and placement but it is the most prominant of the three. The hero item is used within the context of a hero module which contains multiple hero items.

Do

  • Limit the heading to a maximum of two lines as that is the maximum number of lines supported before truncation. The exception is when using context-app, in which case we support only one line of text.
  • Limit the subheading to three lines when context-device, context-accessory, or context-software. Limit the subheading to one line for context-tv-show and two lines for the other types. There is no subheading for context-movie.
  • The paragraph should be kept to four lines or less and only exists for context-article.
  • Hero can contain one or two call to action components.

Don’t

  • Don't use hero item independently of the hero module
  • Don’t use images that adversely affect the legibility of text. All headings, subheadings, and paragraphs are subject to accessibility requirements.
  • Don’t use a single image across the viewports. The layout is dynamic and allows for multiple images in order to optimize the relationship between the image and content region.
  • Don’t use too much text – it can take away from the focused nature of the hero item. Make sure the headings and subheadings are focused and concise. For text-heavy content consider a feature instead.
  • Don’t use the wrong context to change the style of your hero. Heroes should always be used with the context that matches its content.

Also known as

Jumbotron
Spotlight

Related

Hero
Action trigger
Badge
Call to action
Carousel
Heading
Image
Paragraph
Subheading

Options

A hero item must contain at least a heading, image and call to action. Each hero item context has additional requirements. (See below). Some of these optional components may become hidden in smaller viewport sizes.

  • Masks: A gradient overlay can be applied over pictures through the use of maskings.
Option Result
f-mask-20 Applies a 20% opacity overlay over the hero image.
f-mask-40 Applies a 40% opacity overlay over the hero image.
f-mask-60 Applies a 60% opacity overlay over the hero image.
f-mask-80 Applies a 80% opacity overlay over the hero image.
f-mask-100 Applies a 100% opacity overlay over the hero image.
  • Layout: In order to position the child elements within the hero, set the layout to one of the following values below:
Option Result
f-x-left f-y-top Positions content box in the top left area of the hero. Contents are left-aligned.
f-x-center f-y-top Positions content box in the top center area of the hero. Contents are centered.
f-x-right f-y-top Positions content box in the top right area of the hero. Contents are left-aligned.
f-x-left f-y-center Positions content box in the middle left area of the hero. Contents are left-aligned.
f-x-center f-y-center Positions content box in the center area of the hero. Contents are centered.
f-x-right f-y-center Positions content box in the middle right area of the hero. Contents are left-aligned
f-x-left f-y-bottom Positions content box in the bottom left area of the hero. Contents are left-aligned.
f-x-center f-y-bottom Positions content box in the bottom center area of the hero. Contents are centered.
f-x-right f-y-bottom Positions content box in the bottom right area of the hero. Contents are left-aligned.
  • Context: Context describe different types of content which may contain different sets of components. heading and call-to-action are required for all hero items. Depending on the hero item context there may be additional components shown.
Context Example Components
context-accessory Surface keyboard heading, subheading (optional), price, 1 or more call to action
context-app Skype, Windows phone apps heading, subheading (optional), image (app icon), rating (optional), 1 or more call to action
context-article MSN article heading, paragraph, logo, 1 or more call to action
context-device Surface Book, Microsoft Band heading, subheading, price, 1 or more call to action
context-game Minecraft, Tomb Raider heading, subheading (optional), rating, 1 or more call to action
context-movie Movies to rent or buy heading, subheading, 1 or more call to action
context-music-album Albums heading, subheading, image (album art), 1 or more call to action
context-music-artist Artists heading, subheading, 1 or more call to action
context-software Windows, Office heading, subheading (optional), 1 or more call to action
context-tv-show TV series or episodes heading, subheading, 1 or more call to action

Development

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

Code and preview

Type: Accessory

Placeholder with grey background and dimension watermark without any imagery

Heading

Subheading

$ 10
<section class="m-hero-item f-x-left f-y-top context-accessory theme-dark" itemscope itemtype="http://schema.org/Product">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">10</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: App

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

Heading

Subheading

Community rating: 3/5

<section class="m-hero-item f-x-left f-y-center context-app theme-dark" itemscope itemtype="http://schema.org/SoftwareApplication">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <picture>
                <source srcset="https://placehold.it/64x64" media="(min-width:0)">
                <img src="https://placehold.it/64x64" alt="Placeholder with grey background and dimension watermark without any imagery">
            </picture>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Community rating:
                    <span itemprop="ratingValue">3</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Device

Placeholder with grey background and dimension watermark without any imagery

Heading

$ 10
<section class="m-hero-item f-x-center f-y-bottom context-device f-mask-20 theme-light" itemscope itemtype="http://schema.org/Product">
    <picture>
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472" src="http://placehold.it/1259x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">10</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Article

Placeholder with grey background and dimension watermark without any imagery

Heading

description

<section class="m-hero-item f-x-center f-y-top context-article theme-dark" itemscope itemtype="http://schema.org/Article">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <p class="c-paragraph">description</p>
            <div class="c-logo">
                <span>Logo</span>
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Game

Placeholder with grey background and dimension watermark without any imagery

Product title

Product subtitle

Community rating: 3/5

<section class="m-hero-item f-x-center f-y-center context-game theme-dark" itemscope itemtype="http://schema.org/VideoGame">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-product-title">
                <cite>Product title</cite>
            </h1>
            <p class="c-product-subtitle">Product subtitle</p>
            <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Community rating:
                    <span itemprop="ratingValue">3</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Movie

Placeholder with grey background and dimension watermark without any imagery

Product subtitle

Product title

<section class="m-hero-item f-x-center f-y-bottom context-movie f-mask-100 theme-dark" itemscope itemtype="http://schema.org/Movie">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <p class="c-product-subtitle">Product subtitle</p>
            <h1 class="c-product-title">
                <cite>Product title</cite>
            </h1>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Music (album)

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

Product title

Product subtitle

<section class="m-hero-item f-x-right f-y-top context-music-album f-mask-40 theme-dark" itemscope itemtype="http://schema.org/MusicAlbum">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <picture>
                <source srcset="http://placehold.it/120x120" media="(min-width:0)">
                <img class="c-image" src="http://placehold.it/120x120" alt="Placeholder with grey background and dimension watermark without any imagery">
            </picture>
            <h1 class="c-product-title">
                <cite>Product title</cite>
            </h1>
            <p class="c-product-subtitle">Product subtitle</p>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Music (artist)

Placeholder with grey background and dimension watermark without any imagery

Product subtitle

Product title

<section class="m-hero-item f-x-right f-y-center context-music-artist f-mask-60 theme-dark" itemscope itemtype="http://schema.org/Person">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <p class="c-product-subtitle">Product subtitle</p>
            <h1 class="c-product-title">
                <cite>Product title</cite>
            </h1>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Software

Placeholder with grey background and dimension watermark without any imagery

Heading

Subheading

<section class="m-hero-item f-x-left f-y-bottom context-software f-mask-100 theme-light" itemscope itemtype="http://schema.org/SoftwareApplication">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: TV show

Placeholder with grey background and dimension watermark without any imagery

Product subtitle

Product title

<section class="m-hero-item f-x-right f-y-center context-tv-show f-mask-80 theme-dark" itemscope itemtype="http://schema.org/TVSeries">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <p class="c-product-subtitle">Product subtitle</p>
            <h1 class="c-product-title">
                <cite>Product title</cite>
            </h1>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Device with video

Heading

$ 300
<section class="m-hero-item f-x-center f-y-bottom context-device theme-light" itemscope itemtype="http://schema.org/Product">
    <div class="m-ambient-video">
        <video role="img" alt="Ambient video alt text" poster="images/ambient-example-1.png" muted autoplay loop>
            <source src="videos/ambient-example-1.mp4" type="video/mp4">
            <source src="videos/ambient-example-1.webm" type="video/webm">
            <source src="videos/ambient-example-1.ogg" type="video/ogg">
        </video>
    </div>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">300</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Accessory with multiple calls to action on dark theme

Placeholder with grey background and dimension watermark without any imagery

Heading

Subheading

$ 0
<section class="m-hero-item f-x-left f-y-top context-accessory theme-dark" itemscope itemtype="http://schema.org/Product">
    <picture>
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" src="http://placehold.it/1259x472/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">0</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <div class="c-group">
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Accessory with multiple calls to action on light theme

Placeholder with grey background and dimension watermark without any imagery

Heading

Subheading

$ 0
<section class="m-hero-item f-x-left f-y-top context-accessory theme-light" itemscope itemtype="http://schema.org/Product">
    <picture>
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472" src="http://placehold.it/1259x472" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">0</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <div class="c-group">
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: Accessory with multiple calls to action with accent color

Placeholder with grey background and dimension watermark without any imagery

Heading

Subheading

$ 0
<section class="m-hero-item f-x-left f-y-top context-accessory theme-light" itemscope itemtype="http://schema.org/Product">
    <picture>
        <source srcset="http://placehold.it/1600x600/EFEFEF/DDDDDD" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/EFEFEF/DDDDDD" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/EFEFEF/DDDDDD" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/EFEFEF/DDDDDD" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/EFEFEF/DDDDDD" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/EFEFEF/DDDDDD" media="(min-width:0)">
        <img srcset="http://placehold.it/1259x472/EFEFEF/DDDDDD" src="http://placehold.it/1259x472/EFEFEF/DDDDDD" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">0</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <div class="c-group f-accent">
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>

Type: App with option for use with transparent header

Placeholder with grey background and dimension watermark without any imagery
64 x 64 dimension placeholder with white background and dimension watermark without any imagery

Heading

Subheading

Community rating: 3/5

<section class="m-hero-item f-x-left f-y-center context-app f-transparent theme-dark" itemscope itemtype="http://schema.org/SoftwareApplication">
    <picture>
        <source srcset="http://placehold.it/2048x1152" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x1000" media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1399x787" media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x787" src="http://placehold.it/1399x787" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <picture>
                <source srcset="https://placehold.it/64x64/ffffff" media="(min-width:0)">
                <img src="https://placehold.it/64x64/ffffff" alt="64 x 64 dimension placeholder with white background and dimension watermark without any imagery">
            </picture>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <div class="c-rating" data-value="3" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Community rating:
                    <span itemprop="ratingValue">3</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>