Hero banner (old version)

This pattern is no longer supported

This old method of implementing the hero banner pattern is deprecated and will be removed in a future version of the digital pattern library. Please refer to the current hero banner pattern for the correct method.

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

Rules for hero banner

  • Hero banners must only be used at the top of a page directly under the navigation bar.
  • Breadcrumbs must not be used on pages featuring a hero banner.
  • Hero banners must not be used on content pages, with the exception of long-style pages. For example, the current halls of residence pages.
  • The colours of the transparent overlay, gradient overlay, and button must not be altered.
  • Embedded videos can be included in any option. Some options below show embedded videos as an example.
  • A second optional call-to-action can be included if required.

Image guidelines

  • Hero banners must always have an image background.
  • The size of a hero banner image must be 1905 × 362 pixels.
  • 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 must not be used (for example, to form a collage) 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".

Options available

Hero banner with blue transparent overlay and second call-to-action (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Scotland’s first university

Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.

Search for courses Entry requirements

Code 
<!-- Begin pattern: hero-banner //-->
<section class="hero-banner hero-banner--overlay hero-banner--blue-transparent-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-005.jpg);">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-8">
                <h2 class="call-heading">Scotland’s first university</h2>
                <p>Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.</p>
                <p>
                <a class="btn btn-primary btn-lg" href="#">Search for courses</a>
                <a class="btn btn-primary btn-lg" href="#">Entry requirements</a>
                </p>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with dark green transparent overlay with embedded video (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Discovering the Chanka

Who were the Chanka? Dr Sabine Hyland from the Department of Social Anthropology has conducted ethnohistorical and ethnographic research on the Chanka people of Peru.

Read full story

Code 
<!-- Begin pattern: hero-banner //-->
<section class="hero-banner hero-banner--overlay hero-banner--dkgreen-transparent-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-004.jpg);">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-7">
                <h2 class="call-heading">Discovering the Chanka</h2>
                <p>Who were the Chanka? Dr Sabine Hyland from the Department of Social Anthropology has conducted ethnohistorical and ethnographic research on the Chanka people of Peru.</p>
                <p>
                <a class="btn btn-primary btn-lg" href="#">Read full story</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/69eAaV9qEYE?rel=0&amp;amp;showinfo=0" allowfullscreen=""></iframe></div>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with burgundy and orange gradient overlay with embedded video (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Visit St Andrews

Experience St Andrews for yourself by coming to one of our visiting days. Find out more about the town, University, and your subject of choice.

Book your place

Code 
<!-- Begin pattern: hero-banner //-->
<section class="hero-banner hero-banner--overlay hero-banner--gradient-burgundy-orange-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-003.jpg);">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-7">
                <h2 class="call-heading">Visit St Andrews</h2>
                <p>Experience St Andrews for yourself by coming to one of our visiting days. Find out more about the town, University, and your subject of choice.</p>
                <p>
                <a class="btn btn-primary btn-lg" href="#">Book your place</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>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with purple and orange gradient overlay (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Choose St Andrews

Study at the University of St Andrews and experience world-class teaching, cutting edge research and the flexible degree structure of Scotland’s first university.

Why St Andrews

Code 
<!-- Begin pattern: hero-banner //-->
<section class="hero-banner hero-banner--overlay hero-banner--gradient-purple-orange-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-006.jpg);">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-8">
                <h2 class="call-heading">Choose St Andrews</h2>
                <p>Study at the University of St 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="#">Why St Andrews</a>
                </p>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with orange and yellow gradient overlay (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

International St Andrews

You can meet our staff all over the world. We visit schools, attend fairs and run events through the year.

Meet us in your country

Code 
<!-- Begin pattern: hero-banner //-->
<section class="hero-banner hero-banner--overlay hero-banner--gradient-orange-yellow-overlay" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-002.jpg);">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-8">
                <h2 class="call-heading">International St Andrews</h2>
                <p>You can meet our staff all over the world. We visit schools, attend fairs and run events through the year.</p>
                <p>
                <a class="btn btn-primary btn-lg" href="#">Meet us in your country</a>
                </p>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with no overlay (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Scotland's first university

Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.

Study at St Andrews

Code 
<!-- Begin pattern: hero-banner //-->
<section class="hero-banner" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-001.jpg);">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-8">
                <h2 class="call-heading">Scotland&#x27;s first university</h2>
                <p>Discover what it’s like to study at St 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 Andrews</a>
                </p>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with embedded video and no overlay (deprecated)

This option is no longer supported

This implementation is now deprecated and will be removed in a future release.

Example

Scotland's first university

Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.

Study at St Andrews

Code 
<!-- Begin pattern: hero-banner //-->
<section class="hero-banner" style="background-image: url(../../assets/docs/images/cta/hero-banner-image-001.jpg);">
    <div class="container">
        <div class="fg row">
            <div class="col-xs-12 col-md-7">
                <h2 class="call-heading">Scotland&#x27;s first university</h2>
                <p>Discover what it’s like to study at St 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 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>
</section>
<!-- End pattern: hero-banner //-->