Abstract hero

For feature content and landing pages this is a good hero to use when images are available. It provides a visually interesting start to the content. It should not be used with any images under the size.

The benefit of using an abstract hero instead of an image hero is that they are narrower in size so take up less space, scrolling time and get users to your content faster than an image hero. If, however, you have a specific image in mind that has context to the page you may want to consider the image hero instead as there is more space for this to work with images of people and places. 

The abstract hero is pretty much what it says on the tin. It should be an abstract image that gives the sense or "mood" of the content. Sometimes, it might be a specific image but only part of it, for example, a part of a building. Generally speaking, you should avoid images of people and faces for this component type. Images that have a focal point away from the centre point tend to work better.

Key features

• option to select specific background image for each page
• option to select generic background on a section-by-section basis from a dropdown list, this means that all backgrounds for that section can then be updated easily from the T4 list without a coding change
• defaults to grey and white chevron pattern if neither of the above selected
• optional breadcrumbs
• optional call to action button
• Heading (H1) plus two optional subtitles

The recommended size for an abstract hero is 2560px x 800px.

This is the same size as a letterbox full-width image so you can use this component type to download it in Chorus. 

The University's media library features a category of abstract photography so you may want to start your search there. 

If, however, you're struggling to find something there we recommend the following stock image sites: 

• Pexels
• Pixabay 
• Unsplash
• Adobe Stock Images (if you don't have a paid account for this and see something you'd like to use on here then you can contact the Design team to request a download of the image)

Take a look at some of our best practice examples