Skip to main content

Immersive hero item

An immersive hero allows for a foreground image to be present either above or below the content area. The foreground image will scale with the viewport, ensuring that there will be no collision between the image and content.

Preview Immersive hero item

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. The immersive hero item is used within the context of an immersive hero module which contains multiple immersive hero items.

Do

  • 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 too much text. Make sure the headings and subheadings are focused and concise.

Also known as

Full page hero
Spotlight

Related

Hero item
Carousel

Specifications

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

Development

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

Code and preview

Immersive hero item with top aligned foreground image

<section class="m-immersive-hero-item theme-light f-align-top">
    <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">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</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>

Preview

Immersive hero item with bottom aligned foreground image

<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" 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>
            <h1 class="c-heading">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</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>

Preview

Immersive hero item without foreground image

<section class="m-immersive-hero-item theme-light f-align-top">
    <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">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</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>

Preview

Immersive hero item without foreground image

<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">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</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>

Preview

Immersive hero item module with top vertical alignment and two calls to action

<section class="m-immersive-hero-item theme-light 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">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</p>
            <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>
        <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>

Preview

Immersive hero item module with bottom vertical alignment and two calls to action

<section class="m-immersive-hero-item theme-light f-align-bottom">
    <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>
        <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>
            <h1 class="c-heading">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</p>
            <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>

Preview

Immersive hero item module without an image and top vertical alignment and two calls to action

<section class="m-immersive-hero-item theme-light 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">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</p>
            <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>

Preview

Immersive hero item module without an image and bottom vertical alignment and two calls to action

<section class="m-immersive-hero-item theme-light f-align-bottom">
    <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">Immersive hero heading spans up to two lines</h1>
            <p class="c-subheading">Subheading can span to two lines</p>
            <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>

Preview