Homepage & Landing Page Hero Area

Which option you choose depends on:

1. the quality image/video you have 
2. the amount of copy you prefer in the header
3. if you want contact information in the header

Option 1: Introduction

This option includes a heading, subheading, subtle background image, and an optional sidebar. This is the preferred and most flexible option, allowing for more descriptive intro statements and option for contact information in the sidebar

A sample introduction hero is shown below. See a live example on the Informational Homepage example.

Tips for the introduction hero area

1. Follow copy length guidelines. Intro heading and subheading should be relatively short.
2. Use sidebar for one main piece of important information. This is a great area to get information that many visitors want, such as contact info or a frequently used page or resource.
3. Make sure image sits in the background. The copy is the most important thing in the hero; avoid a strong focus on faces or images with a lot of contrast.

Option 2: Full-width image or background video

A full-width image or background video with a short intro statement. This is best if you have high quality, impactful media. If you need a longer intro statement or contact information, you'll need to use the introduction hero option.

A sample full-width image hero is shown below. See a live example of each on the Image-Focused Homepage example and the Background Video Homepage example.

Tips for full-width image or background video hero area. 

1. Follow copy length guidelines. The heading should be very short and sweet; the image or video is the star of the hero area.
2. Use a high quality image/video. Make sure the image or video doesn't look blurry or pixilated.
3. Use images without text. Text inside an image can clash with the intro text on top of that image.

Option 3: No hero

This option is best if you don't need or want imagery for a hero area, and will use kitchen sink widgets to build this space.