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.
How to use a Hero
- Choose a photo that's well-suited to this size and shape – see more tips for image selection below.
- Crop the image to exactly 1440 pixels wide by 440 pixels high using an image editing software, and save it.
- On your page, add a Hero component.
- Upload your resized image in the Background Image field of the Hero component. You will need to supply a brief description of the image in the Alternative text field as well.
- Note: There are two image upload fields in the Hero component, one labeled Media and one labeled Background Image. This can be confusing – but of the two, you want to place your image in the Background Image field.
- Populate the Hero component's Title field – this should be the same as the page's title for consistency.
- Save your draft.
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. These will be difficult to understand because different devices will show different portions of the image, and because the page title will cover parts of the image.
- Group photos of people are not suitable as Hero images. The extremely short shape means that people's faces or bodies will be cut off in undesirable ways, and the page title is likely to cover people's faces or other important elements.
- A maximum of one hero can be added per page. It doesn't need to be placed 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