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.

Options for the hero banner

• Hero banner
• Hero banner with transparent overlay
• Hero banner with embedded video

Rules

• Hero banners must only be used at the top of a homepage under the navigation bar.
• Hero banners must be used on child pages.

Image guidelines

• Hero banners must always have an image background.
• The size of a hero banner image must be 1905 × 362 pixels and created using the background image Photoshop template (PSD, 4.3 MB).
• 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)">.
• The main focus of this pattern is the call-to-action text so the background image shouldn't be overly complicated.
• Multiple images in a collage is must not be used as they are complicated.
• Photographs including people are encouraged in the hero banner.
• Photographs of the St Andrews skyline are encouraged in the hero banner.
• Close ups of subjects, such as people's faces, are discouraged. The hero banner image should have room to breathe.

Text guidelines

• The hero banner heading must not exceed 40 characters.
• The hero banner paragraph text must not exceed 230 characters.
• There must only be one paragraph on a hero banner.

Video guidelines

• Videos embeded on the hero banner must be hosted on either YouTube or Vimeo.
• When sourcing embed code from YouTube, disable "Show suggested videos when the video finishes" and "Show video title and player actions". This will only show the player controls.
• When sourcing embed code from Vimeo, disable "Portrait", "Title", and "Byline".

Background image template

The background image must created using the Photoshop template below so it can be positioned reliably across a variety of screen sizes.

Hero banner Photoshop template (PSD, 4.3 MB)

• Focus section
  • This area should contain the main focal point of the image.
  • It is recommended that the main focus should complement the composition.

Hero banner

If the chosen background image is not overly complicated and has strong colours, this option may be used instead of the transparent overlay option.

<!-- Begin pattern: hero-banner //-->
<div class="hero-banner " style="background-image: url(../../assets/docs/images/cta/hero-banner-image-001.jpg);" title="hero banner">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-8">
                <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>
</div>
<!-- End pattern: hero-banner //-->

Hero banner with transparent overlay

If the chosen background image is overly complicated, this option should be used instead of the default hero banner. The colour of the transparent overlay and hero banner button should not be altered.

<!-- Begin pattern: hero-banner //-->
<div class="hero-banner transparent-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-002.jpg);" title="hero banner">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-8">
                <div class="call-heading">Choose St&nbsp;Andrews</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>
                </p>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: hero-banner //-->

Hero banner with embedded video

<!-- Begin pattern: hero-banner //-->
<div class="hero-banner " style="background-image: url(../../assets/docs/images/cta/hero-banner-image-001.jpg);" title="hero banner">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-7">
                <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 class="col-xs-12 col-md-5">
                <div class="embed-responsive embed-responsive-16by9"><iframe src="https://www.youtube.com/embed/JxHfSwpddCU?rel=0&amp;amp;showinfo=0" allowfullscreen=""></iframe></div>
            </div>
        </div>
    </div>
</div>
<!-- End pattern: hero-banner //-->