University of St Andrews

Hero banner

The hero banner pattern displays a large heading, introductory text and a call to action over an optional, large background image.

Background image template

So it may be positioned reliably across a variety of screen sizes, the background image must use the Photoshop template below.

Hero banner Photoshop template (PSD, 4.3 MB)

• Blurred section
  • This area should have a duplicate of the main hero banner image.
  • A layer mask is then applied to this layer. The layer mask has a gradient fill applied for the right side of this layer to become transparent.
  • A gaussian blur smart filter is then applied, set at 5.0px.
  • A darkened layer sits above this image with a mask applied to make call-to-action text.
• Focus section
  • This area should contain the main focal point of the image.
  • It is recommended that the main focus should complement the composition.

• Background images are optional, but if present should be 1905px × 362px and created using the background image template (see above).
• There is no default background image, you will need to supply an image by attaching an inline style on <div class="hero-banner">. For example: <div class="hero-banner" style="background-image: url(path/to/image.jpg)">.

Default hero banner

<!-- Begin pattern: hero-banner //-->

<div class="hero-banner" style="background-image: url(../../assets/docs/images/cta/cta-example1.jpg);">

    <div class="container">
        <div class="bg" style="background-image: url(../../assets/docs/images/cta/cta-example1.jpg);"></div>

        <div class="fg">
            <div class="call-heading">Scotland's first university</div>
            <p>Discover what it’s like to study at St&nbsp;Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.</p>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Study at St&nbsp;Andrews</a>
            </p>
        </div>
    </div>
</div>

<!-- End pattern: hero-banner //-->

Hero banner with sections

<!-- Begin pattern: hero-banner //-->

<div class="hero-banner" style="background-image: url(../../assets/docs/images/cta/cta-sections.jpg);">

    <div class="container">
        <div class="bg" style="background-image: url(../../assets/docs/images/cta/cta-sections.jpg);"></div>

        <div class="fg">
            <div class="call-heading">Scotland's first university</div>
            <p>Discover what it’s like to study at St&nbsp;Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.</p>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Study at St&nbsp;Andrews</a>
            </p>
        </div>
    </div>
</div>

<!-- End pattern: hero-banner //-->

Hero banner no background

<!-- Begin pattern: hero-banner //-->

<div class="hero-banner">

    <div class="container">
        <div class="bg"></div>

        <div class="fg">
            <div class="call-heading">Ever to excel</div>
            <p>Study at the University of St&nbsp;Andrews and experience world-class teaching, cutting edge research and the flexible degree structure of Scotland’s first university.</p>
            <p>
                <a class="btn btn-primary btn-lg" href="#">Search for courses</a>
                    <a class="btn btn-primary btn-lg" href="#">News</a>
            </p>
        </div>
    </div>
</div>

<!-- End pattern: hero-banner //-->