Skip to main content

Hero

A hero 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. Hero consists of multiple hero items wrapped in a carousel.

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

Hero module with illustrating two different context types

Best practices

Use hero 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. A hero is good for pages that have subpages, such as home pages, category pages, and routing pages. The call to action (e.g. "LEARN MORE”) in a hero, typically leads to a marketing page, where the user can learn more about the specific item being showcased, or to a product detail page where the user can buy the product.

Do

  • Place the hero at the top of the page. Additional heroes can exist further down the page but should not stack more than one hero in a row.
  • Use engaging images of sufficient resolution that are reflective of the Microsoft brand and values.
  • Limit the heading to a maximum of three lines if it is not paired with a paragraph or subheading – otherwise, it can span up to two lines. The exception is when using context-app, in which case we recommend 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 stack heroes on top of each other. Consider using feature instead for showcased items that must be stackable.
  • 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. 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 item
Carousel
Action toggle

Accessibility

Ideally, the beginning of the page's main content should start with <h1> and, whenever possible, there should be only one <h1> per page. If your page has an <h1> heading, you may use a lower level heading for the hero item's heading, as assistive technologies rely on semantic structuring with headings to appropriately read the page content. For more information, see accessibility.

Options

A hero must contain at least one hero item. Each hero and hero item context has additional requirements. (See below). Some of these optional components may become hidden in smaller viewport sizes.

  • Add classname f-auto-play to the carousel and f-toggle to the action-toggle to enable flipping slides.

  • Add an action-trigger component to enable an accessible f-auto-play behavior.

  • 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 heroes. Depending on the hero 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 schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Hero alignment options

<div class="m-hero">
    <div class="c-carousel f-multi-slide f-auto-play" role="region" aria-label="Label" data-js-interval="6000">
        <div class="c-group">
            <div class="c-sequence-indicator" role="tablist">
                <button role="tab" aria-selected="true" aria-label="View x-align left" aria-controls="x-align-left" title="x-align-left"></button>
                <button role="tab" aria-selected="false" aria-label="View x-align center" aria-controls="x-align-center" title="x-align-center"></button>
                <button role="tab" aria-selected="false" aria-label="View x-align right" aria-controls="x-align-right" title="x-align-right"></button>
                <button role="tab" aria-selected="false" aria-label="View y-align top" aria-controls="y-align-top" title="y-align-top"></button>
                <button role="tab" aria-selected="false" aria-label="View y-align center" aria-controls="y-align-center" title="y-align-center"></button>
                <button role="tab" aria-selected="false" aria-label="View y-align bottom" aria-controls="y-align-bottom" title="y-align-bottom"></button>
            </div>
            <button class="c-action-toggle c-glyph glyph-play f-toggle" data-toggled-label="Pause" data-toggled-glyph="glyph-pause" aria-label="Play"></button>
        </div>
        <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>
                <li id="x-align-left" data-f-theme="dark" class="f-active" role="tabpanel">
                    <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" 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">x-align-left</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">100</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>
                </li>
                <li id="x-align-center" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-top context-accessory theme-dark" 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">x-align-center</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">100</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>
                </li>
                <li id="x-align-right" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-right f-y-top context-accessory theme-dark" 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">x-align-right</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">100</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>
                </li>
                <li id="y-align-top" data-f-theme="dark" role="tabpanel">
                    <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" 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">y-align-top</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">100</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>
                </li>
                <li id="y-align-center" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-center context-accessory theme-dark" 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">y-align-center</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">100</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>
                </li>
                <li id="y-align-bottom" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-bottom context-accessory theme-dark" 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">y-align-bottom</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">100</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>
                </li>
            </ul>
        </div>
    </div>
</div>

Hero context options without autoplay

<div class="m-hero">
    <div class="c-carousel f-multi-slide" role="region" aria-label="New Products" data-js-interval="6000">
        <div class="c-sequence-indicator" role="tablist">
            <button role="tab" aria-selected="true" aria-label="Accessory hero" aria-controls="accessory-hero" title="accessory-hero"></button>
            <button role="tab" aria-selected="false" aria-label="App hero" aria-controls="app-hero" title="app-hero"></button>
            <button role="tab" aria-selected="false" aria-label="Article hero" aria-controls="article-hero" title="article-hero"></button>
            <button role="tab" aria-selected="false" aria-label="Device hero" aria-controls="device-hero" title="device-hero"></button>
            <button role="tab" aria-selected="false" aria-label="Game hero" aria-controls="game-hero" title="game-hero"></button>
            <button role="tab" aria-selected="false" aria-label="Movie hero" aria-controls="movie-hero" title="movie-hero"></button>
            <button role="tab" aria-selected="false" aria-label="Music album hero" aria-controls="music-album-hero" title="music-album-hero"></button>
            <button role="tab" aria-selected="false" aria-label="Music artist hero" aria-controls="music-artist-hero" title="music-artist-hero"></button>
            <button role="tab" aria-selected="false" aria-label="Software hero" aria-controls="software-hero" title="software-hero"></button>
            <button role="tab" aria-selected="false" aria-label="TV-show hero" aria-controls="tv-show-hero" title="tv-show-hero"></button>
        </div>
        <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>
                <li id="accessory-hero" data-f-theme="dark" class="f-active" role="tabpanel">
                    <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" 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">Accessory hero</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">100</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>
                </li>
                <li id="app-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-app theme-dark" itemscope itemtype="http://schema.org/SoftwareApplication">
                        <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>
                                <picture>
                                    <source srcset="https://placehold.it/64x64/E3E3E3" media="(min-width:0)">
                                    <img src="https://placehold.it/64x64/E3E3E3" alt="Placeholder with grey background and dimension watermark without any imagery">
                                </picture>
                                <h1 class="c-heading">App hero</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">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>
                </li>
                <li id="article-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-article theme-dark" itemscope itemtype="http://schema.org/Article">
                        <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">Article hero</h1>
                                <p class="c-paragraph">[description]</p>
                                <div class="c-logo">
                                    <span>[Publisher Name]</span>
                                </div>
                                <div>
                                    <a href="#" class="c-call-to-action c-glyph">
                                        <span>CALL TO ACTION</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="device-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-device theme-dark" 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">Device hero</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">100</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>
                </li>
                <li id="game-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-game theme-dark" itemscope itemtype="http://schema.org/VideoGame">
                        <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-product-title">
                                    <cite>Game hero</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">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>
                </li>
                <li id="movie-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-movie theme-dark" itemscope itemtype="http://schema.org/Movie">
                        <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>
                                <p class="c-product-subtitle">[product-subtitle]</p>
                                <h1 class="c-product-title">
                                    <cite>Movie hero</cite>
                                </h1>
                                <div>
                                    <a href="#" class="c-call-to-action c-glyph">
                                        <span>CALL TO ACTION</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="music-album-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-music-album theme-dark" itemscope itemtype="http://schema.org/MusicAlbum">
                        <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>
                                <picture>
                                    <source srcset="http://placehold.it/120x120/E3E3E3" media="(min-width:0)">
                                    <img class="c-image" src="http://placehold.it/120x120/E3E3E3" alt="[Album cover]">
                                </picture>
                                <h1 class="c-product-title">
                                    <cite>Music-album hero</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>
                </li>
                <li id="music-artist-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-music-artist theme-dark" itemscope itemtype="http://schema.org/Person">
                        <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>
                                <p class="c-product-subtitle">[product-subtitle]</p>
                                <h1 class="c-product-title">
                                    <cite>Music-artist hero</cite>
                                </h1>
                                <div>
                                    <a href="#" class="c-call-to-action c-glyph">
                                        <span>CALL TO ACTION</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="software-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-software theme-dark" itemscope itemtype="http://schema.org/SoftwareApplication">
                        <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">Software hero</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>
                </li>
                <li id="TV-show-hero" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-left f-y-top context-tv-show theme-dark" itemscope itemtype="http://schema.org/TVSeries">
                        <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>
                                <p class="c-product-subtitle">[product-subtitle]</p>
                                <h1 class="c-product-title">
                                    <cite>TV show hero</cite>
                                </h1>
                                <div>
                                    <a href="#" class="c-call-to-action c-glyph">
                                        <span>CALL TO ACTION</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Hero mask options

<div class="m-hero">
    <div class="c-carousel f-multi-slide f-auto-play" role="region" aria-label="New Products" data-js-interval="6000">
        <div class="c-group">
            <div class="c-sequence-indicator" role="tablist">
                <button role="tab" aria-selected="true" aria-label="View mask-20" aria-controls="mask-20" title="mask-20"></button>
                <button role="tab" aria-selected="false" aria-label="View mask-40" aria-controls="mask-40" title="mask-40"></button>
                <button role="tab" aria-selected="false" aria-label="View mask-60" aria-controls="mask-60" title="mask-60"></button>
                <button role="tab" aria-selected="false" aria-label="View mask-80" aria-controls="mask-80" title="mask-80"></button>
                <button role="tab" aria-selected="false" aria-label="View mask-100" aria-controls="mask-100" title="mask-100"></button>
            </div>
            <button class="c-action-toggle c-glyph glyph-play f-toggle" data-toggled-label="Pause" data-toggled-glyph="glyph-pause" aria-label="Play"></button>
        </div>
        <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>
                <li id="mask-20" data-f-theme="dark" class="f-active" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-center context-accessory f-mask-20 theme-dark" 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">Mask-20</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">100</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>
                </li>
                <li id="mask-40" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-center context-accessory f-mask-40 theme-dark" 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">Mask-40</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">100</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>
                </li>
                <li id="mask-60" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-center context-accessory f-mask-60 theme-dark" 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">Mask-60</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">100</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>
                </li>
                <li id="mask-80" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-center context-accessory f-mask-80 theme-dark" 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">Mask-80</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">100</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>
                </li>
                <li id="mask-100" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-center context-accessory f-mask-100 theme-dark" 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">Mask-100</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">100</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>
                </li>
            </ul>
        </div>
    </div>
</div>

Hero theme options

<div class="m-hero">
    <div class="c-carousel f-multi-slide f-auto-play" role="region" aria-label="New Products" data-js-interval="6000">
        <div class="c-group">
            <div class="c-sequence-indicator" role="tablist">
                <button role="tab" aria-selected="true" aria-label="View theme-light" aria-controls="theme-light" title="theme-light"></button>
                <button role="tab" aria-selected="false" aria-label="View theme-dark" aria-controls="theme-dark" title="theme-dark"></button>
            </div>
            <button class="c-action-toggle c-glyph glyph-play f-toggle" data-toggled-label="Pause" data-toggled-glyph="glyph-pause" aria-label="Play"></button>
        </div>
        <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>
                <li id="theme-light" data-f-theme="light" class="f-active" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-center context-accessory theme-light" itemscope itemtype="http://schema.org/Product">
                        <picture>
                            <source srcset="http://placehold.it/1600x600/E3E3E3/C8C8C8" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1600x600/E3E3E3/C8C8C8" media="(min-width: 1400px)">
                            <source srcset="http://placehold.it/1259x472/E3E3E3/C8C8C8" media="(min-width: 1084px)">
                            <source srcset="http://placehold.it/1083x609/E3E3E3/C8C8C8" media="(min-width:768px)">
                            <source srcset="http://placehold.it/767x431/E3E3E3/C8C8C8" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x303/E3E3E3/C8C8C8" media="(min-width:0)">
                            <img srcset="http://placehold.it/1259x472/E3E3E3/C8C8C8" src="http://placehold.it/1259x472/E3E3E3/C8C8C8" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <h1 class="c-heading">Theme-light</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">100</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>
                </li>
                <li id="theme-dark" data-f-theme="dark" role="tabpanel">
                    <section class="m-hero-item f-x-center f-y-center 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">Theme-dark</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">100</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>
                </li>
            </ul>
        </div>
    </div>
</div>