Hero banner
The hero banner pattern displays a large heading, introductory text and a call to action over an optional, large background image.
Background image template
So it may be positioned reliably across a variety of screen sizes, the background image must use the Photoshop template below.
Hero banner Photoshop template (PSD, 4.3 MB)
- Blurred section
- This area should have a duplicate of the main hero banner image.
- A layer mask is then applied to this layer. The layer mask has a gradient fill applied for the right side of this layer to become transparent.
- A gaussian blur smart filter is then applied, set at 5.0px.
- A darkened layer sits above this image with a mask applied to make call-to-action text.
- Focus section
- This area should contain the main focal point of the image.
- It is recommended that the main focus should complement the composition.
- Background images are optional, but if present should be 1905px × 362px and created using the background image template (see above).
- There is no default background image, you will need to supply an image by attaching an inline style on
<div class="hero-banner">. For example:<div class="hero-banner" style="background-image: url(path/to/image.jpg)">.