This old method of implementing the hero banner pattern is deprecated and will be removed in a future version of the digital pattern library. Please refer to the current hero banner pattern for the correct method.
The hero banner pattern displays a large heading, introductory text and a call-to-action over a large background image.
Rules for hero banner
Hero banners must only be used at the top of a page directly under the navigation bar.
Breadcrumbs must not be used on pages featuring a hero banner.
Hero banners must not be used on content pages, with the exception of long-style pages. For example, the current halls of residence pages.
The colours of the transparent overlay, gradient overlay, and button must not be altered.
Embedded videos can be included in any option. Some options below show embedded videos as an example.
A second optional call-to-action can be included if required.
Image guidelines
Hero banners must always have an image background.
The size of a hero banner image must be 1905 × 362 pixels.
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.
Text guidelines
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.
Video guidelines
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".
Hero banner with dark green transparent overlay with embedded video (deprecated)
Attention
This implementation is now deprecated and will be removed in a future release.
Example
Discovering the Chanka
Who were the Chanka? Dr Sabine Hyland from the Department of Social Anthropology has conducted ethnohistorical and ethnographic research on the Chanka people of Peru.
Who were the Chanka? Dr Sabine Hyland from the Department of Social Anthropology has conducted ethnohistorical and ethnographic research on the Chanka people of Peru.
Hero banner with purple and orange gradient overlay (deprecated)
Attention
This implementation is now deprecated and will be removed in a future release.
Example
Choose St Andrews
Study at the University of St Andrews and experience world-class teaching, cutting edge research and the flexible degree structure of Scotland’s first university.
Study at the University of St Andrews and experience world-class teaching, cutting edge research and the flexible degree structure of Scotland’s first university.