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
- Image: 1440px wide by 440px tall
- See Working with Images for more information