Overview

Hero images are a common way to showcase an image that conveys a mood or feeling to the visitor, or simply represents the content on the page to communicate at a glance that they are viewing the right page. A description can be used to add context to the rest of the page or the image itself.

 

When to use a Hero

  • When you have an appropriately sized & shaped photo that can give users a visual representation of what your page content is about.

 

Tips for best results

  • Choose and crop photos carefully for this component. The image specification is fairly compact to keep this from pushing other content too far down the page – not every image is well-suited to this format.
  • The image should be a single photo. Do not use diagrams, images containing text, or collage/composite style images, as these will become difficult to understand due to the title overlaying the image and the different sizing displayed on different devices.
  • After placing the Hero component, upload your image in the Background Image field – do not use the Media field at this time.
  • The component has a Title field which is required. This should be the same as the page's title for consistency.
  • A maximum of one hero can be added per page. It doesn't need to be in a specific order in your content editor – it will always show up at the top. This component cannot be used to place a full-width image further down on a page.
  • If you have an image that isn't big enough for this space or can't be appropriately cropped, an alternative is to include a right or left-aligned image in a WYSIWYG component instead.

 

Image dimensions and considerations