University of St Andrews

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

• Only show at the bottom of the page, immediately above the footer.
• You must only use one secondary call-to-action per page.
• You may use the class: center (default), or left to specify how the content should be aligned.
• To chose a background image, use the class secondary-call-*, where * is a number between 0 and 9. See below for background image options.
• You may use a transparent overlay over the background by adding transparent-overlay to the secondary-call div.
• You must use at least one call-to-action button, but not more than three.

Options available

• Default - red gowns
• Transparent overlay
• Castle and sea - text left aligned
• Gardens - text centre aligned
• St Andrews dusk skyline
• Undergraduate pier walk
• St Salvators Chapel
• St Andrews beach at dusk
• St Andrews cathedral
• Torchlit procession
• St Andrews sunset skyline

Default - red gowns

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-0">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call again</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Transparent overlay

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center transparent-overlay secondary-call-2">
    <div class="container">
        <div class="call-heading">Apply to St&nbsp;Andrews</div>
        <p>Apply early for your best chance at being placed here.</p>
        <div class="call-to-action-buttons">
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Start your application</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Castle and sea - text left aligned

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call left secondary-call-1">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call to action 2</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call to action 3</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Gardens - text centre aligned

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-2">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

St Andrews dusk skyline

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-3">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call again</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Undergraduate pier walk

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-4">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

St Salvators Chapel

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-5">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call again</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

St Andrews beach at dusk

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-6">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call again</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call again 2</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

St Andrews cathedral

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-7">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call to action 2</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

Torchlit procession

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-8">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->

St Andrews sunset skyline

<!-- Begin pattern: secondary-call //-->
<div class="secondary-call center secondary-call-9">
    <div class="container">
        <div class="call-heading">News and events</div>
        <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-primary btn-lg" href="#" tabindex="0" role="button">Call to action</a>
            <a class="btn btn-primary btn-lg" href="#" tabindex="0" role="button">Call again</a>
        </div>
    </div>
</div>
<!-- End pattern: secondary-call //-->