Hero Image

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

Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn UI and UX Design on Codecademy