Use a shorter hero when scrolling to the content below is the primary goal. Consider not using a hero module at all in this case.

Image sizes for small hero:
Desktop: 2000 x 400 px
Mobile: 600 x 700 px

Image sizes for medium height hero:
Desktop: 2000 x 700 px
Mobile: 600 x 1000 px

Full screen height no matter what screen size. Use a full-screen hero when the primary goal of the page is to engage with the hero e.g. play a video within the hero. Only use this option when the content beneath is not important. The user will go to what they can see.

Image sizes for full screen height hero:
Desktop: 2000 x 1333 px
Mobile: 600 x 1000 px

The blue box was in an older iteration of the site and we look to remove this as we standardize the look.

Currently only Vimeo is supported. Large or medium height is recommended. If playing the video is the primary goal of the page, use a button in the hero and use full-screen height.