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)">.
The main focus of this pattern is the call-to-action text so the background image shouldn't be overly complicated.
Multiple images must not be used (for example, to form a collage) as they are complicated.
Photographs including people are encouraged in the hero banner.
Photographs of the St Andrews skyline are encouraged in the hero banner.
Close ups of subjects, such as people's faces, are discouraged. The hero banner image should have room to breathe.
The hero banner heading must not exceed 40 characters.
The hero banner paragraph text must not exceed 230 characters.
There must only be one paragraph on a hero banner.
Videos embeded on the hero banner must be hosted on either YouTube or Vimeo.
When sourcing embed code from YouTube, disable "Show suggested videos when the video finishes" and "Show video title and player actions". This will only show the player controls.
When sourcing embed code from Vimeo, disable "Portrait", "Title", and "Byline".
Background image template
The background image must created using the Photoshop template below so it can be positioned reliably across a variety of screen sizes.