Hero images can help engage and inspire your users

Use the "Featured Content Inset" layout to add an inner image, caption, and call to action.

Browse the UW Photo Library

Encourage people to dive deeper into your site with a call to action

Visit the Memorial Union

Hero Image

Prominently show a full-width image or series of images as a slider at the top of the page. Hero images can also have a title, call to action, or featured content added inside the image.

They are useful for enhancing information on the page with strong visual representation, but should not be overused. Most information-based pages do not need them.  Hero images can cause slower load times on mobile networks, disrupting the user experience.

Scroll through the hero slider above to see examples of each hero image type.

In this page



  • Use images that are cropped to 1600 pixels wide and 500 pixels in height for best results.
  • Keep headlines, captions, and call to actions brief.
  • Choose an image that fits the purpose of your message.
  • Use photos taken by your unit or downloaded from sites like Adobe StockUnsplash, or the UW Photo Library


  • Use several sentences for headlines, captions, or call to actions.
  • Use images that are smaller or larger than 1600 pixels wide and 500 pixels in height.
  • Use an image you do not own the rights to.


Be sure to include alternative text for your hero image. See the Center for UX guidelines for more information on writing alternative text for images and learning how to choose appropriate images.