Secondary call-to-action

The secondary call-to-action pattern should be used to draw attention to important actions that typically support the content of the page. The pattern features a heading, some introductory text, call-to-action buttons and an optional background image.

Rules for secondary call-to-action

  • You must only use one secondary call-to-action per page.
  • Can only be used on full width page layouts.
  • For best results place at the bottom of the page to reduce the risk of users stopping scrolling believing they have reached the end of the content. Find out more information on the Digital Communications team blog (Scrolling and the illusion of completeness).
  • You must include at least one call-to-action button - for the most important action.
  • Optional secondary call-to-action buttons may be used for supplementary actions.
  • Heading text must not exceed 100 characters.
  • Paragraph text must not exceed 350 characters.

CSS classes for approved background colours

  • secondary-call--blue-background
  • secondary-call--orange-background
  • secondary-call--burgundy-background
  • secondary-call--purple-background

Options available

Default secondary call to action

Example

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 Register for updates
Code 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call" >
    <div class="container">
        <h2 class="call-heading">Why St Andrews</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">Apply now</a>
            <a class="btn btn-action-secondary" href="#">Register for updates</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Blue background

Example

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 Register for updates
Code 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--background secondary-call--blue-background" >
    <div class="container">
        <h2 class="call-heading">Why St Andrews</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">Apply now</a>
            <a class="btn btn-action-secondary" href="#">Register for updates</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Orange background

Example

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 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--background secondary-call--orange-background" >
    <div class="container">
        <h2 class="call-heading">News and events</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">News</a>
            <a class="btn btn-action-secondary" href="#">Events</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Burgundy background

Example

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 Register for updates
Code 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--background secondary-call--burgundy-background" >
    <div class="container">
        <h2 class="call-heading">Apply for accommodation</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">Apply now</a>
            <a class="btn btn-action-secondary" href="#">Register for updates</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Purple background

Example

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
Code 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--background secondary-call--purple-background" >
    <div class="container">
        <h2 class="call-heading">Research with us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">Find a collaborator</a>
            <a class="btn btn-action-secondary" href="#">Postgraduate opportunities</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Blue transparent overlay - deprecated

This option is no longer supported

This old method of implementation is deprecated and will be removed in a future version of the digital pattern library.

Example

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 Register for updates
Code 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--overlay secondary-call--blue-transparent-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-001.jpg);">
    <div class="container">
        <h2 class="call-heading">Why St Andrews</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">Apply now</a>
            <a class="btn btn-action" href="#">Register for updates</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Orange transparent overlay - deprecated

This option is no longer supported

This old method of implementation is deprecated and will be removed in a future version of the digital pattern library.

Example

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 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--overlay secondary-call--orange-transparent-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-002.jpg);">
    <div class="container">
        <h2 class="call-heading">News and events</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">News</a>
            <a class="btn btn-action" href="#">Events</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Burgundy transparent overlay - deprecated

This option is no longer supported

This old method of implementation is deprecated and will be removed in a future version of the digital pattern library.

Example

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 Register for updates
Code 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--overlay secondary-call--burgundy-transparent-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-003.jpg);">
    <div class="container">
        <h2 class="call-heading">Apply for accommodation</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">Apply now</a>
            <a class="btn btn-action" href="#">Register for updates</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->

Purple transparent overlay - deprecated

This option is no longer supported

This old method of implementation is deprecated and will be removed in a future version of the digital pattern library.

Example

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
Code 
<!-- Begin pattern: secondary-call //-->
<section class="secondary-call secondary-call--overlay secondary-call--purple-transparent-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-004.jpg);">
    <div class="container">
        <h2 class="call-heading">Research with us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor massa eget metus molestie fermentum. Pellentesque interdum sem nunc, vitae blandit tellus tempus eget.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-action" href="#">Find a collaborator</a>
            <a class="btn btn-action" href="#">Postgraduate opportunities</a>
        </div>
    </div>
</section>
<!-- End pattern: secondary-call //-->