Skip to main content

Image intro

Image intro sits at the top of the page and generates intrigue for the contents of that page through the use of engaging edge-to-edge imagery. Image intro maintains its aspect ratio across all viewports and has the option of integrating with the transparent header.

Example

Placeholder with grey background and dimension watermark without any imagery

Halo Wars 2: Forums

Become a member of the Halo community. Join the discussion in the forums, view featured community content, and get the latest news.

Best practices

Use image intro in situations where the top of the page needs engaging imagery, but either does not have as much content to overlay or does not have a primary action associated with it. Image intro should be used to set the mood of the page in a delightful way through the use of an image that captures the flavor of what the page is all about. Its intended use is slightly different from typographic page intro, which is used for a similar purpose but places greater emphasis on the text rather than imagery.

Image intro must also not be confused with hero, which aims to incite a user action related to its contents. The best way to approach image intro would be to think of it as a masthead that introduces the user to the contents of the page down below.

Do

  • Restrict the use of image intro to the top of the page only.
  • Use engaging images of sufficient resolution that are reflective of the Microsoft brand and values. The dimensions of image assets may change based on what variant of image intro is being used, and whether or not the parent website uses the transparent header. See detailed image sizes in the options section below.
  • Limit the heading to a single line of text. Strings that exceed this run the risk of truncation or overflow especially on smaller viewport sizes.
  • Limit the paragraph to two lines in the largest viewport. These will automatically wrap into more lines at smaller viewports.
  • Provide a fallback background color which will be used to enhance the experience in situations where the image takes a long time to load, or can not be displayed due to a loading error.

Don’t

  • Don't use image intro lower down the page. Consider using feature or feature group instead.
  • Don't use images that adversely affect the legibility of text. All headings and paragraphs are subject to accessibility requirements.
  • Don't use a single image asset across the viewports. The layout is dynamic and allows for multiple assets 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 image intro. Make sure the headings and paragraphs are focused and concise. For text-heavy content consider typographic page intro instead.

Also known as

Light hero
Immersive image

Related

Hero
Hero item
Typographic page intro
Image
Heading
Paragraph

Options

  • Style: Image intro is designed to go edge to edge while maintaining it's original aspect ratio. When used in conjunction with the transparent header, it supports 16:9 and 16:6 aspect ratios.

  • Transparent Header: Add a class of f-transparent when using image intro with the transparent header. Note: any extra space above the content is to ensure there is no collision with the UHF.

  • Layout: In order to position the child elements within image intro, set the layout to one of the following values below:

Option Result
f-align-top Heading and paragraph anchor to the top of the module. Contents are centered.
f-align-center Heading and paragraph anchor to the middle of the module. Contents are centered.
f-align-bottom Heading and paragraph anchor to the bottom of the module. Contents are centered.
  • Masks: A gradient overlay can be applied over pictures through the use of masking. Choosing a mask of the right opacity is essential to maintain legibility of text.
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.

Development

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

Code and preview

Image intro with 16:9 image, center alignment and transparent option

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-transparent f-align-center theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x1350/" 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>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:9 image, top alignment and transparent option

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-transparent f-align-top theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x1350/" 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>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:9 image, bottom alignment and transparent option

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-transparent f-align-bottom theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x1350/" 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>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:6 image and center alignment

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-align-center theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x900/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x667/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x525/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x406/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x288/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x202/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x525/" src="http://placehold.it/1399x525/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:6 image and top alignment

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-align-top theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x900/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x667/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x525/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x406/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x288/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x202/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x525/" src="http://placehold.it/1399x525/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:6 image and bottom alignment

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-align-bottom theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x900/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x667/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x525/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x406/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x288/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x202/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x525/" src="http://placehold.it/1399x525/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:6 image, center alignment and transparent option

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-transparent f-align-center theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x900/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x667/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x525/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x406/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x288/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x202/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x525/" src="http://placehold.it/1399x525/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:6 image, top alignment and transparent option

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-transparent f-align-top theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x900/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x667/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x525/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x406/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x288/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x202/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x525/" src="http://placehold.it/1399x525/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:6 image, bottom alignment and transparent option

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-transparent f-align-bottom theme-light">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x900/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x667/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x525/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x406/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x288/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x202/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x525/" src="http://placehold.it/1399x525/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>

Image intro with 16:6 image, bottom alignment, transparent option and f-mask-80 option

Placeholder with grey background and dimension watermark without any imagery

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.

<section class="m-image-intro f-transparent f-align-bottom theme-dark f-mask-80">
    <picture class="c-image">
        <source srcset="http://placehold.it/2400x900/" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x667/" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x525/" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x406/" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x288/" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x202/" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x525/" src="http://placehold.it/1399x525/" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <h1 class="c-heading">Heading</h1>
        <p class="c-paragraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
    </div>
</section>