Hero Images
A Hero Image is a large, visually prominent banner placed at the top of a page. It
is designed to introduce the page’s primary topic and set the visual tone.
We offer two size options along with multiple style variations to accommodate different content needs and layout types.
Use a Hero Image when:
-
You want to clearly introduce a major section or landing page
-
The page benefits from strong visual impact
-
You need a headline and optional supporting text over an image
Hero Images should be used thoughtfully and sparingly. Not every page requires one.
For layout differences, and style variations, refer to the examples below.
Variant 1 - Short, Image Only
Department Hero
This is the Department Hero
Variant 2 - Short, Blue Content Area Left; Headline, Subhead; Image Right
Department Hero
This is the Department Hero
Variant 3 - Short, Blue Content Area Left; Headline; Image Right
Department Hero
This is the Department Hero
Variant 4 - Short, Image Under Blue Content Area; Headline; Centered
Department Hero
This is the Department Hero
Variant 5 - Short, Blue Content Area Left; Headline, Subhead; Image Left and Right
Department Hero
This is the Department Hero
Variant 6 - Tall; Image Only
Department Hero
This is the Department Hero
Variant 7 - Tall, Blue Content Area Left; Headline, Subhead, Red Button; Image Left and Right
Department Hero
This is the Department Hero
Variant 8 - Tall, Boxed Blue Content Area Left; Headline, Subhead, Red Button; Full Width Image
Department Hero
This is the Department Hero
Variant 9 - Tall, Boxed White Content Area Left; Headline, Subhead, Red Button; Full Width Image
Department Hero
This is the Department Hero
Variant 10 - Tall, Centered Headline, Subhead, 3 Buttons; Full Width Image w/ Overlay
Department Hero
This is the Department Hero