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.
- 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, as these will become difficult to understand due to the title overlaying the image and the different sizing displayed on different devices.
- Photos of groups of people are generally not suited for use as Hero images – the extremely short shape means that people's faces or bodies will be cut off in undesirable ways.
- 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