A Hero Image is the ONLY layer which appears above the page title. Hero content may be aligned to the left, center or right.

Heroes set the stage for a page. Often used at the top of landing page layouts and homepages, they display content and an optional action about a subject.

Use this to feature your main content and call to action. This content should reflect your page’s most important user need or goal and requires high-quality photography.

Dos

• Use high-resolution images that can be formatted horizontally

Don’ts

• Don’t use large amounts of text
• Don’t use low-resolution or low-quality images
• Do not use an image to present text. True text should be used whenever possible, as it supports translation, is searchable, and is easier to maintain and customize.

Image

Provide effective alt text of the image that is concise and relevant. Avoid phrases like “image of” since screen readers often already announce the type of element. 

Overline (Optional)

Appears above the title and is designed to introduce the headline

Title

Use a clear and concise title that describes the pathway content

Body Text

Write body text in clear and simple language

Link

Use effective text to describe what the link is and where it is taking the user. This should be clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link.