Styling notes:

• XL hero: homepage and any media landing pages, typically display type: centered 
• L hero: primary website pages (top nav and service/industry pages), typically display type: bottom-left 
• M hero: 3rd+ tier pages, blog indexes, calls to action within page (careers, etc)
• S hero: white background, dark text, used on blog pages, basic text pages, anywhere you don't need a background

Typography:

• Most heroes at the top of a page will have a headline that should be styled as a Heading 1.
• Homepage or XL heroes that have short headlines can be styled as Display 1 to take up more space.

Settings:

• Text placement: Settings switch content between being centered within the hero or aligned to the bottom-left corner.
• Add container: Insets the hero within the main container of the page (keeps the background image or color from going edge-to-edge of your browser)
• Background fill type: Explicitly tells the background which fill type to use (there may be instances where you're uploading multiple selections, like a backup photo to use if a video doesn't load, etc)
• Background image: Hero will resize the image to the height chosen on the Size settings tab but a 16:9 ratio at least 1800px wide is a solid base size. For best use as an image background, look for photos that are lower contrast.
• Button settings: Typically, you'll use a large button, primary (blue) color, with a right-arrow as the button styles for top-of-page heroes.
• Video backgrounds: From Vimeo, choose embed and turn on: autoplay, mute and loop. Click into the embed code and copy just the URL for the video.