Skip to main content

Immersive hero

An immersive hero is a full page hero with engaging content that highlights a Microsoft product or service.

Preview Immersive hero

Best practices

In a storytelling flow, the immersive hero provides the largest surface for promoting devices or services as it will fill the entire screen for most browser sizes. It allows for a foreground image that scales with the content region, ensuring that there is never an overlap through the viewports.

Do

  • Place the immersive hero at the top of the page. Due to the large size it is not recommended to have multiple immersive heroes on the page.
  • Use engaging images that are reflective of the Microsoft brand and values.
  • Use images of sufficient resolution that provide crisp, clear details of products, or lifestyle imagery.
  • Limit the heading to a maximum of two lines.
  • Limit the subheading to a maximum of two lines. The focus of the immersive hero is on the imagery, not text.

Don’t

  • Don't use immersive heroes for introducing page content. The main action should be to drive users toward a PDP or learn more page.
  • Don't use multiple immersive heroes on a single page.
  • Don’t use too much text. Make sure the headings and subheadings are focused and concise.

Also known as

Full page hero
Spotlight

Related

Immersive hero item
Carousel

Specifications

Browser support IE10+, Edge, Safari, Firefox, and Chrome

Development

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

Code and preview

Immersive hero showing all layout options

<div class="m-immersive-hero">
    <div class="c-carousel f-multi-slide" role="region" aria-label="Label">
        <div class="c-sequence-indicator" role="tablist">
            <button role="tab" aria-selected="true" aria-label="View default align top" aria-controls="default-align-top" title="default-align-top"></button>
            <button role="tab" aria-selected="false" aria-label="View default align bottom" aria-controls="default-align-bottom" title="default-align-bottom"></button>
            <button role="tab" aria-selected="false" aria-label="View no image align top" aria-controls="no-image-align-top" title="no-image-align-top"></button>
            <button role="tab" aria-selected="false" aria-label="View no image align bottom" aria-controls="no-image-align-bottom" title="no-image-align-bottom"></button>
        </div>
        <button class="c-flipper f-previous f-large" aria-hidden="true" tabindex="-1"></button>
        <button class="c-flipper f-next f-large" aria-hidden="true" tabindex="-1"></button>
        <div itemscope itemtype="http://schema.org/ItemList">
            <ul>
                <li id="default-align-top" data-f-theme="dark" class="f-active">
                    <section class="m-immersive-hero-item theme-dark f-align-top">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2400x1600/666666/171717" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x1185/666666/171717" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x931/666666/171717" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x1805/666666/171717" media="(min-width:768px)">
                            <source srcset="http://placehold.it/768x1280/666666/171717" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x898/666666/171717" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x931/666666/171717" src="http://placehold.it/1399x931/666666/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <h1 class="c-heading">Default align top</h1>
                                <p class="c-subheading">Subheading</p>
                                <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                                    <span>CALL TO ACTION</span>
                                </a>
                            </div>
                            <picture class="c-image">
                                <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/1083x812" media="(min-width:768px)">
                                <source srcset="http://placehold.it/767x575" media="(min-width:540px)">
                                <source srcset="http://placehold.it/539x404" media="(min-width:0)">
                                <img srcset="http://placehold.it/1399x787" src="http://placehold.it/1399x787" alt="Placeholder image">
                            </picture>
                        </div>
                    </section>
                </li>
                <li id="default-align-bottom" data-f-theme="light">
                    <section class="m-immersive-hero-item theme-light f-align-bottom">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2400x1600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x1185" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x931" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x1805" media="(min-width:768px)">
                            <source srcset="http://placehold.it/768x1280" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x898" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x931" src="http://placehold.it/1399x931" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <picture class="c-image">
                                <source srcset="http://placehold.it/2048x1152/666666/171717" media="(min-width: 1779px)">
                                <source srcset="http://placehold.it/1778x1000/666666/171717" media="(min-width:1400px)">
                                <source srcset="http://placehold.it/1399x787/666666/171717" media="(min-width:1084px)">
                                <source srcset="http://placehold.it/1083x812/666666/171717" media="(min-width:768px)">
                                <source srcset="http://placehold.it/767x575/666666/171717" media="(min-width:540px)">
                                <source srcset="http://placehold.it/539x404/666666/171717" media="(min-width:0)">
                                <img srcset="http://placehold.it/1399x787/666666/171717" src="http://placehold.it/1399x787/666666/171717" alt="Placeholder image">
                            </picture>
                            <div>
                                <h1 class="c-heading">Default align bottom</h1>
                                <p class="c-subheading">Subheading</p>
                                <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                                    <span>CALL TO ACTION</span>
                                </a>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="no-image-align-top" data-f-theme="dark">
                    <section class="m-immersive-hero-item theme-dark f-align-top">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2400x1600/666666/171717" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x1185/666666/171717" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x931/666666/171717" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x1805/666666/171717" media="(min-width:768px)">
                            <source srcset="http://placehold.it/768x1280/666666/171717" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x898/666666/171717" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x931/666666/171717" src="http://placehold.it/1399x931/666666/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <h1 class="c-heading">No image align top</h1>
                                <p class="c-subheading">Subheading</p>
                                <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                                    <span>CALL TO ACTION</span>
                                </a>
                            </div>
                        </div>
                    </section>
                </li>
                <li id="no-image-align-bottom" data-f-theme="light">
                    <section class="m-immersive-hero-item theme-light f-align-bottom">
                        <picture class="c-image">
                            <source srcset="http://placehold.it/2400x1600" media="(min-width: 1779px)">
                            <source srcset="http://placehold.it/1778x1185" media="(min-width:1400px)">
                            <source srcset="http://placehold.it/1399x931" media="(min-width:1084px)">
                            <source srcset="http://placehold.it/1083x1805" media="(min-width:768px)">
                            <source srcset="http://placehold.it/768x1280" media="(min-width:540px)">
                            <source srcset="http://placehold.it/539x898" media="(min-width:0)">
                            <img srcset="http://placehold.it/1399x931" src="http://placehold.it/1399x931" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <div>
                            <div>
                                <h1 class="c-heading">No image align bottom</h1>
                                <p class="c-subheading">Subheading</p>
                                <a href="#" class="c-call-to-action c-glyph" aria-label="More verbose call to action text">
                                    <span>CALL TO ACTION</span>
                                </a>
                            </div>
                        </div>
                    </section>
                </li>
            </ul>
        </div>
    </div>
</div>

Preview