Hero Image

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jun 8, 2022Updated Apr 4, 2023
Contribute to Docs

A hero image, also called a banner or a hero header, is an image that’s displayed at the top of a page.

Hero images are typically large and may stretch across the full width of the page. They come in many styles — photographs, illustrations, digital art, and even videos — and can include design elements like text or buttons.

Screenshot of a hero image on Codecademy’s website. The hero includes text, buttons, and a graphic design of a honeycomb shape.

Because of its prominent size and placement, a hero image is likely to be the first element that the user notices. Thus, designers consider how the hero image can create an optimal first impression. The hero might be designed to spark curiosity, convey values, tell a story, or prompt the user to take action.

Resources

All contributors

Looking to contribute?

Learn UI and UX Design on Codecademy