Secondary call-to-action

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.
  • Can only be used on full width page layouts.
  • 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

Options available

Blue transparent overlay

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
Code 
<!-- Begin pattern: secondary-call //-->
<div 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>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Orange transparent overlay

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 //-->
<div 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>
</div>
<!-- End pattern: secondary-call //-->

Burgundy transparent overlay

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
Code 
<!-- Begin pattern: secondary-call //-->
<div 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>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Purple transparent overlay

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 Current vacancies
Code 
<!-- Begin pattern: secondary-call //-->
<div 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>
            <a class="btn btn-action" href="#">Current vacancies</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Default text center aligned - 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.

Call to action Call again
Code 
<!-- Begin pattern: secondary-call //-->
<div class="secondary-call " >
    <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="#">Call to action</a>
            <a class="btn btn-action" href="#">Call again</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Text left aligned - 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.

Call to action Call to action 2 Call to action 3
Code 
<!-- Begin pattern: secondary-call //-->
<div class="secondary-call left" >
    <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="#">Call to action</a>
            <a class="btn btn-action" href="#">Call to action 2</a>
            <a class="btn btn-action" href="#">Call to action 3</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->