University of St Andrews

Hero banner

The hero banner pattern displays a large heading, introductory text and a call-to-action over an optional, large background image.

Options for the hero banner

• Hero banner
• Hero banner with transparent overlay

Image guidelines

• Hero banners must always have an image background.
• The size of a hero banner image must be 1905 × 362 pixels and created using the background image Photoshop template (PSD, 4.3 MB).
• 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 in a collage is must not be used 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.

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.

Hero banner Photoshop template (PSD, 4.3 MB)

• Focus section
  • This area should contain the main focal point of the image.
  • It is recommended that the main focus should complement the composition.

Hero banner

If the chosen background image is not overly complicated and has strong colours, this option may be used instead of the transparent overlay option.

    

        

            
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
                
        
    
       

Hero banner with transparent overlay

If the chosen background image is overly complicated, this option should be used instead of the default hero banner. The colour of the transparent overlay and hero banner button should not be altered.

    

        

            
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.
                

                Search for courses