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.
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.
Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.
Learn UI and UX Design on Codecademy
Front-End EngineerFront-end engineers work closely with designers to make websites beautiful, functional, and fast.
Includes 34 Courses
With Professional Certification