University of St Andrews

Secondary call-to-action

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

Only show at the bottom of the page, immediately above the footer.

• Alignment
  By adding a class of center (default), right, or left, you can specify how the content should be aligned.
• Background image
  By adding a class of the from secondary-call-*, where * is a number between 0 and 9, you may select a preferred background image from additional variants.
• Multiple calls to action
  You may include more than more one call to action if needed.

Default

No secondary-call-* class.

<!-- Begin pattern: secondary-call //-->

<div class="secondary-call center secondary-call-">
    <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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 1 - 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
                <a class="btn btn-primary btn-lg" href="#">Call to action 2</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 2 - right aligned

<!-- Begin pattern: secondary-call //-->

<div class="secondary-call right 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 3 - centre aligned

<!-- 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 4

<!-- Begin pattern: secondary-call //-->

<div class="secondary-call left 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 5

<!-- Begin pattern: secondary-call //-->

<div class="secondary-call left 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 6

<!-- Begin pattern: secondary-call //-->

<div class="secondary-call left 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 7

<!-- 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 8

<!-- Begin pattern: secondary-call //-->

<div class="secondary-call left 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->

Background image 9

<!-- Begin pattern: secondary-call //-->

<div class="secondary-call left 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>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Call to action</a>
            </p>

    </div>
</div>

<!-- End pattern: secondary-call //-->