Heroes
Hero sections are the first impression a user has with the brand when landing on a website.
Hero sections are the first impression a user has with the brand when landing on a website.
Heroes refer to the top portion of a page that is in the user’s viewport upon initial page load.
A hero quickly defines the page subject for visitors and sets the tone for the rest of the content to follow.
Example of a hero on desktop
Use sentence case for all headlines, taglines, and buttons greater than 2 words.
Use the primary typography as the default headline font style.
Don’t add excessive horizontal spacing between the letters in sentence case headlines.
Don’t use a line-height (line spacing) that is less than 1.5 times the font size.
Heroes are typically made up of (4) elements: An Image, a Headline, a Subtitle, and a Call to Action.
Example of a full-width image background in a hero
On a tablet
On a phone
Example of a floating image in a hero
On a tablet
On a phone
Example of a slider in a hero
On a tablet
On a phone
Example of an image collage in a hero
On a tablet
On a phone
Example of a floating image with a link in a hero
On a tablet
On a phone
