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

• Hero banner
• Hero banner with transparent overlay

Image guidelines

• Hero banners should always have an image background.
• The size of a hero banner image must be 1905px × 362px and created using the background image Photoshop template.
• 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.
• Using multiple images in a collage is discouraged 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 should be no more than one paragraph on a hero banner.

Background image template

So it may be positioned reliably across a variety of screen sizes, the background image must created using the Photoshop template below.

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 can 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.
• The colour of the transparent overlay should not be altered.
• The colour of the 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