Hero banner (old version)

This pattern is no longer supported

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".

Options available

Hero banner with blue transparent overlay and second call-to-action (deprecated)
Hero banner with dark green transparent overlay with embedded video (deprecated)
Hero banner with burgundy and orange gradient overlay with embedded video (deprecated)
Hero banner with purple and orange gradient overlay (deprecated)
Hero banner with orange and yellow gradient overlay (deprecated)
Hero banner with no overlay (deprecated)
Hero banner with embedded video and no overlay (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code



    
        
            
                Scotland’s first university
                Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.
                
                Search for courses
                Entry requirements

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code



    
        
            
                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.
                
                Read full story

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code



    
        
            
                Visit St Andrews
                Experience St Andrews for yourself by coming to one of our visiting days. Find out more about the town, University, and your subject of choice.
                
                Book your place

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code



    
        
            
                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.
                
                Why St Andrews

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code



    
        
            
                International St Andrews
                You can meet our staff all over the world. We visit schools, attend fairs and run events through the year.
                
                Meet us in your country

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code



    
        
            
                Scotland's first university
                Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.
                
                Study at St Andrews

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Code



    
        
            
                Scotland's first university
                Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.
                
                Study at St Andrews