Component - Hero with Dropdown Menu
Menu
Dropdown Menu
Hero
Video Overlay Hero
Sizzle Hero
Hero Carousel
Intro
Mini Hero
Body Copy
Two Columns
1. Dropdown
menu purpose
This hero with a dropdown menu component is used to unify related pages to create a cohesive experience for users. Just like the hero component, it consist of 4 elements: Headline, Description, Image and CTA.
Menu
Dropdown Menu
Hero
Sizzle Hero
Hero Carousel
Intro
Mini Hero
Body Copy
Two Columns

2. Hero component
background specs
Black background (with white text), white background (with black text) or an image background (with black or white text) can be used.
Menu
Dropdown Menu
Hero
Sizzle Hero
Hero Carousel
Intro
Mini Hero
Body Copy
Two Columns

3. Hero component font specs
Headline is available in 84px (55 char. ct); 64 px (80 char. ct); 48 px (80 char. ct) and 32 px (125 char. ct). 84 or 64px is most common and recommended.
Menu
Dropdown Menu
Hero
Sizzle Hero
Hero Carousel
Intro
Mini Hero
Body Copy
Two Columns
4. Dropdown menu constraints
Limit hero dropdown menu items to less than the height of the hero.
Limit character count of each menu item to fit width of the dropdown menu.
Maximum character count including the spaces and special characters is 25.