Hero banner

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 only be used on the home page of a web site.
• Only the specified colours for the heading text may be used, applying the appropriate class.
  

  Blue

  no class required (default value)

  Burgundy

  hero-section__heading--burgundy

  Green

  hero-section__heading--green

  Orange

  hero-section__heading--orange

  Purple

  hero-section__heading--purple

• A second optional call-to-action can be included if required.
• Introduction paragraph text is required if any call-to-action buttons are used.

Image guidelines

• The hero banner uses two different sized images to provide greater design control accross different screen sizes. These sizes are -
  • 1920 pixels wide and 600 pixels high
  • 750 pixels wide and 500 pixels high.
• Both sized images must be included - there is no default image.
• Multiple images must not be combined (for example, to form a collage).
• Photographs including people 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 39 characters.
• The hero banner paragraph text must not exceed 230 characters.
• There must only be one paragraph on a hero banner.
• The text must never expand beyond the height of the hero banner as this will result in partial obscuring of the text.

Options available

• Hero banner with introduction and two call-to-action buttons
• Hero banner with introduction and one call-to-action button
• Hero banner with introduction
• Hero banner with heading only
• Hero banner with heading only - art direction

Hero banner with introduction and two call-to-action buttons

This example uses the default heading colour and includes all possible types of content.

                                  

    
      
      
    
    

        

            
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
            
        
    

Hero banner with introduction and one call-to-action button

This example uses an alternate heading colour and features only one button.

                                  

    
      
      
    
    

        

            
Accommodation at St Andrews
            

            
St Andrews has more than 4,000 bed spaces and a fantastic variety of accommodation to suit all tastes and budgets. Prospective students can be sure that they will find suitable accommodation during their studies.
            See the halls of residence
            
        
    

Hero banner with introduction

This examples uses an alternate heading colour and features no call-to-actions.

                                  

    
      
      
    
    

        

            
Visit the University
            

            
Join us on a visiting day to meet with academic staff, talk to current students, see the town and ask any questions you have about applying. Book your visit today.
            
        
    

Hero banner with heading only

This example uses an alternate heading colour and only includes a heading.

                                  

    
      
      
    
    

        

            
Academic excellence at St Andrews
        
    

Hero banner with heading only - art direction

This example shows how a cropped in version of the image is used for the mobile scaled size to focus on the key essence of the image.

                                  

    
      
      
    
    

        

            
Class of 2020