Secondary call-to-action

Digital pattern library

Some options of this pattern are depreciated. Do not attempt to use these options for any new website development. They will be removed in a future update.

The secondary call-to-action pattern displays a heading, some introductory text, a call-to-action button and a background image.

Rules for secondary call-to-action

You must only use one secondary call-to-action per page.
You may use a transparent overlay over the background by adding secondary-call--overlay followed by the colour selector class secondary-call--color-transparent-overlay to the secondary-call div.
You must use at least one call-to-action button, but not more than three.
Heading text must not exceed 100 characters.
Paragraph text must not exceed 350 characters.

CSS classes for approved background colours

secondary-call--blue-transparent-overlay
secondary-call--orange-transparent-overlay
secondary-call--burgundy-transparent-overlay
secondary-call--purple-transparent-overlay

Blue transparent overlay

Why St Andrews

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.

Apply now

Code



    
        Why St Andrews
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
        
            Apply now

Orange transparent overlay

News and events

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.

News Events

Code



    
        News and events
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
        
            News
            Events

Burgundy transparent overlay

Apply for accommodation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.

Apply now

Code



    
        Apply for accommodation
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
        
            Apply now

Purple transparent overlay

Research with us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.

Find a collaborator Postgraduate opportunities Current vacancies

Code



    
        Research with us
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
        
            Find a collaborator
            Postgraduate opportunities
            Current vacancies

Default text center aligned (deprecated)

This option is depreciated. Do not attempt to use this option for any new website development. It will be removed in a future update.

News and events

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.

Call to action Call again

Code



    
        News and events
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
        
            Call to action
            Call again

Text left aligned (deprecated)

This option is depreciated. Do not attempt to use this option for any new website development. It will be removed in a future update.

News and events

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.

Call to action Call to action 2 Call to action 3

Code



    
        News and events
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.
        
            Call to action
            Call to action 2
            Call to action 3