Digital pattern library

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

Image guidelines

Text guidelines

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)


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

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


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

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.

Search for courses