Component - Hero with Dropdown Menu

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.

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.

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.

View specs

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.