FedEx Freight truck traveling by prairie

Hero Section

Hero Section

Hero Section

The first thing that the user is met with when landing on any page is the hero. The hero contains an image, header, sub copy and a potential CTA.

Color

When it comes to the text color in the hero, there is only two options, Digital Gray (#333333) or White (#ffffff). The color you choose is dependent on the color of the photo.

Page Anatomy - Hero Color Correct
Check Mark Icon

Correct.

Here you can see that the the page uses a white color for the hero image to contrast the darker background.

Page Anatomy - Hero Color Incorrect
X Mark Icon

Incorrect.

For this page they have utilized the FedEx purple color, which is incorrect. It goes against the FedEx brand guidelines, and could potentially confuse the users.


Copy Restrictions

When it comes to the amount of characters you should use in the hero, less is more. Especially for the header you wanna keep it at maximum to two lines but ideally one, especially when including a CTA.

Page Anatomy - Copy Restrictions Correct
Check Mark Icon

Correct.

Here is a correct use of copy in the Hero. The header is short and concise, and the sub copy is kept to two lines.

Page Anatomy - Copy Restrictions Incorrect
X Mark Icon

Incorrect.

For this example, the header is too long and gets pushed to the very top. This looks uncurated and unproportionate to the rest of the hero.


Call To Action

If you are creating or editing a page that is going to have power users, or want to emphasize an action further, you can include a CTA in. the Hero.

Page Anatomy - Hero Call to Action Correct
Check Mark Icon

Correct.

Here you can see a correct example of using a CTA in the Hero. It works well together with the header and sub copy, and is a straightforward action that the user is familiar with.