Hero
The hero panel introduces a page. It contains the H1 of the page, the summary text, and either a background image or background colour.
Hero example
Examples of the two different hero panel styles can be seen throughout our sites.
The design system site uses the standard hero banner, like the one at the top of this page.
For an example of the SDI style, see the SDI site. opens in a new window
An example of the SDI hero with no image can be found on the SDI contact page. opens in a new window
How to use the hero panel
Make sure the page title is clear and accurately sums up the content on the page. It should also be marked up as a h1.
If you’re using an image in the hero panel, choose one that’s relevant to the page content. Make sure it’s a high quality image, and compress it to reduce its size.
Adding a hero panel in the CMS
Hero panels use a mix of containers and components, so the easiest way to add a hero panel to a page is to use a template.
If the page has a secondary navigation, make sure to add the hero panel into a ‘content header’ container above the main page content. This means the hero will be full width. Find out more about using content headers and footers.
If you're adding an image to the hero panel, make sure to check and adjust the focal point of the image in the media library to make sure the right part of the image is showing. Test this on different devices.
Hero panel modifier rules
Modifiers for this component will be set at the template level and shouldn't need adjusting.
Accessibility
Correctly marking the heading as a H1 means people users screen readers can tell what the page title is.
If the image you’re using provides some kind of information that users need to understand, make sure you add alt text.
Evidence and research
The banner for SDI hasn’t changed from the last design however for SE we tested a new style of banner. Our new design removes the text on the image and adds half and half image and block colour. This allows text to be added to the banner and is more readable.
The SDI hero is an older version of this component. The new version for Scottish Enterprise was much more preferable to users.