Hero image is a large web banner image prominently placed on the webpage, usually in the front and center at the top of the page.

If there are text overlay on top of the image, the text should be readable and should pass web accessibility color contrast in both desktop and mobile views.

Examples: Hero with picture and message

Examples: Hero with picture, message, and call-to-action