Hero banner

The hero banner pattern displays a large heading, introductory text and call-to-action buttons 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 only be used on the home page of a web site.
  • Only the specified background colours for the heading text may be used, applying the appropriate class.
    Blue
    no class required (default value)
    Burgundy
    hero-section__heading--burgundy
    Green
    hero-section__heading--green
    Orange
    hero-section__heading--orange
    Purple
    hero-section__heading--purple
  • A second optional call-to-action button can be included if required.
  • Call-to-action buttons must not be used alongside a form.

Image guidelines

  • The hero banner uses two different sized images to provide greater design control accross different screen sizes. These sizes are -
    • 1920 pixels wide and 600 pixels high
    • 750 pixels wide and 500 pixels high.
  • Both sized images must be included.
  • Multiple images must not be combined (for example, to form a collage).
  • Photographs including people 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 39 characters.
  • The hero banner paragraph text must not exceed 230 characters.
  • There must only be one paragraph on a hero banner.
  • The text must never expand beyond the height of the hero banner as this will result in the text being partial obscured.

Options available

Hero banner with introduction and two call-to-action buttons

This example uses the default heading colour and includes all possible types of content.

Example
Image details

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-section">
    <div class="hero-section__image-mask">
        <picture class="hero-section__image">
          <source srcset="../../assets/docs/images/cta/hero5/1920x600.jpg" media="(min-width: 640px)">
          <img src="../../assets/docs/images/cta/hero5/750x500.jpg" alt="Image details">
        </picture>
    </div>
    <div class="container">
        <div class="hero-section__content">
            <h2 class="hero-section__heading">Scotland’s first university</h2>
            <div class="hero-section__content-group">
                <p class="hero-section__intro">Discover what it’s like to study at St Andrews. Search undergraduate courses, explore postgraduate opportunities or find flexible study options.</p>
                <a class="btn btn-action" href="#">Search for courses</a>
                <a class="btn btn-action-secondary" href="#">Entry requirements</a>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with introduction and one call-to-action button

This example uses an alternate heading background colour and has one call-to-action button.

Example
Image details

Accommodation at St Andrews

St Andrews has more than 4,000 bed spaces and a fantastic variety of accommodation to suit all tastes and budgets. Prospective students can be sure that they will find suitable accommodation during their studies.

See the halls of residence
Code 
<!-- Begin pattern: hero-banner //-->                                  
<section class="hero-section">
    <div class="hero-section__image-mask">
        <picture class="hero-section__image">
          <source srcset="../../assets/docs/images/cta/hero12/1920x600.jpg" media="(min-width: 640px)">
          <img src="../../assets/docs/images/cta/hero12/750x500.jpg" alt="Image details">
        </picture>
    </div>
    <div class="container">
        <div class="hero-section__content">
            <h2 class="hero-section__heading hero-section__heading--burgundy">Accommodation at St Andrews</h2>
            <div class="hero-section__content-group">
                <p class="hero-section__intro">St Andrews has more than 4,000 bed spaces and a fantastic variety of accommodation to suit all tastes and budgets. Prospective students can be sure that they will find suitable accommodation during their studies.</p>
                <a class="btn btn-action" href="#">See the halls of residence</a>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with introduction

This examples uses an alternate heading background colour and has no call-to-action buttons.

Example
Image details

Visit the University

Join us on a visiting day to meet with academic staff, talk to current students, see the town and ask any questions you have about applying. Book your visit today.

Code 
<!-- Begin pattern: hero-banner //-->                                  
<section class="hero-section">
    <div class="hero-section__image-mask">
        <picture class="hero-section__image">
          <source srcset="../../assets/docs/images/cta/hero4/1920x600.jpg" media="(min-width: 640px)">
          <img src="../../assets/docs/images/cta/hero4/750x500.jpg" alt="Image details">
        </picture>
    </div>
    <div class="container">
        <div class="hero-section__content">
            <h2 class="hero-section__heading hero-section__heading--orange">Visit the University</h2>
            <div class="hero-section__content-group">
                <p class="hero-section__intro">Join us on a visiting day to meet with academic staff, talk to current students, see the town and ask any questions you have about applying. Book your visit today.</p>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with heading only

This example uses an alternate heading background colour and only includes a heading.

Example
Image details

Academic excellence at St Andrews

Code 
<!-- Begin pattern: hero-banner //-->                                  
<section class="hero-section">
    <div class="hero-section__image-mask">
        <picture class="hero-section__image">
          <source srcset="../../assets/docs/images/cta/hero6/1920x600.jpg" media="(min-width: 640px)">
          <img src="../../assets/docs/images/cta/hero6/750x500.jpg" alt="Image details">
        </picture>
    </div>
    <div class="container">
        <div class="hero-section__content">
            <h2 class="hero-section__heading hero-section__heading--purple">Academic excellence at St Andrews</h2>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with heading only - art direction

This example shows how a cropped version of the image is used for the mobile scaled size to focus on the key essence of the image. To see the different image adjust the width of your browser until the alternate image is shown.

Example
Image details

Class of 2020

Code 
<!-- Begin pattern: hero-banner //-->                                  
<section class="hero-section">
    <div class="hero-section__image-mask">
        <picture class="hero-section__image">
          <source srcset="../../assets/docs/images/cta/hero7/1920x600.jpg" media="(min-width: 640px)">
          <img src="../../assets/docs/images/cta/hero7/750x500.jpg" alt="Image details">
        </picture>
    </div>
    <div class="container">
        <div class="hero-section__content">
            <h2 class="hero-section__heading hero-section__heading--green">Class of 2020</h2>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with simple search form

This example includes a heading, introduction and simple search form with autocomplete.

Example
Image details

Scotland’s first university

Additional tagline can appear here to add context.

Code 
<!-- Begin pattern: hero-banner //-->                                  
<section class="hero-section">
    <div class="hero-section__image-mask">
        <picture class="hero-section__image">
          <source srcset="../../assets/docs/images/cta/hero2/1920x600.jpg" media="(min-width: 640px)">
          <img src="../../assets/docs/images/cta/hero2/750x500.jpg" alt="Image details">
        </picture>
    </div>
    <div class="container">
        <div class="hero-section__content">
            <h2 class="hero-section__heading">Scotland’s first university</h2>
            <div class="hero-section__content-group">
                <p class="hero-section__intro">Additional tagline can appear here to add context.</p>
                <form class="dpl-form" action="" role="search">
                    <div class="input-group input-group-lg">
                        <input id="hero-section__search" class="form-control search-box form-control--autocomplete" required type="text" aria-label="Course search" maxlength="256" name="search" placeholder="Search website">
                        <button class="clear-icon clear-icon__autocomplete" type="reset" aria-label="Reset" value="Reset"></button>
                        <span class="input-group-btn">
                            <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                                <i class="fa fa-search" title="Search"></i>
                            </button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->

Hero banner with complex search form

This example includes a heading, introduction and complex search form with checkbox options and additional links underneath.

Example
Image details

University of St Andrews Library

Code 
<!-- Begin pattern: hero-banner //-->                                  
<section class="hero-section">
    <div class="hero-section__image-mask">
        <picture class="hero-section__image">
          <source srcset="../../assets/docs/images/cta/hero11/1920x600.jpg" media="(min-width: 640px)">
          <img src="../../assets/docs/images/cta/hero11/750x500.jpg" alt="Image details">
        </picture>
    </div>
    <div class="container">
        <div class="hero-section__content">
            <h2 class="hero-section__heading">University of St Andrews Library</h2>
            <div class="hero-section__content-group">
                <form class="dpl-form" action="" role="search">
                    <fieldset>
                        <legend><p class="hero-section__intro">Search the library's print and online resources.</p></legend>
                        <div class="form-group">
                           <div class="input-group input-group-lg">
                                <input id="hero-section__search2" class="form-control search-box" required type="text" aria-label="Course search" maxlength="256" name="search" placeholder="Search by keyword or phrase">
                                <button class="clear-icon" type="reset" aria-label="Reset" value="Reset"></button>
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" value="Search" type="submit" aria-label="Submit">
                                        <i class="fa fa-search" title="Search"></i>
                                    </button>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <fieldset class="checkbox-box checkbox-box--small inline" aria-describedby="help-checkboxes-inline">
                                <legend class="sr-only"<span class="font-weight--bold">Search specific areas only</span></legend>
                                <p class="help-block sr-only" id="help-checkboxes-inline-small">Select all options that apply.</p>
                                <ul>
                                    <li>
                                        <input  type="checkbox" value="default" id="option1-inline-small" name="option1-inline-small">
                                        <label for="option1-inline-small">Option 1</label>
                                        <div class="check"><i class="fa fa-check" title="checked"></i></div>
                                    </li>
                                    <li>
                                        <input  type="checkbox" value="default" id="option2-inline-small" name="option2-inline-small">
                                        <label for="option2-inline-small">Option 2</label>
                                        <div class="check"><i class="fa fa-check" title="checked"></i></div>
                                    </li>
                                    <li>
                                        <input  type="checkbox" value="default" id="option3-inline-small" name="option2-inline-small">
                                        <label for="option3-inline-small">Option 3</label>
                                        <div class="check"><i class="fa fa-check" title="checked"></i></div>
                                    </li>
                                </ul>
                            </fieldset>
                        </div>
                    </fieldset>
                </form>
                <!-- Begin pattern: horizontal-list //-->  
                <div class="horizontal-list no-margin-top no-margin-bottom">
                    <h4 class="horizontal-list__toggle">
                        <button class="horizontal-list__toggle-button">Additional options</button>
                    </h4>
                    <ul>
                        <li><a href="#">Advanced search</a></li>
                        <li><a href="#">Alternate searches</a></li>
                    </ul>
                </div>
                <!-- End pattern: horizontal-list //-->
            </div>
        </div>
    </div>
</section>
<!-- End pattern: hero-banner //-->