Hero banner

The hero pattern allows you to use a simple tagline and description, as well as imagery to call out specific information, or promote an area of the site. 

Dark hero pattern

The dark hero is used with light images, to ensure sufficient contrast. 

<div class="nsw-hero-banner nsw-hero-banner--dark">
  <div class="nsw-container">
    <div class="nsw-hero-banner__image-area">
      <img src="/sites/default/files/2019-12/421-2000x1250.jpg" class="nsw-hero-banner__image" alt="">
    </div>
    <div class="nsw-hero-banner__content-area">
      <div class="nsw-hero-banner__content">
        <h2 class="nsw-hero-banner__title">
          <a href="#" class="nsw-hero-banner__link">Buy Regional this Christmas</a>
        </h2>
        <p>NSW is facing one of the worst droughts on record. One of the best ways you can support regional communities in NSW is to Buy Regional this Christmas.</p>
        <svg class="nsw-icon nsw-hero-banner__icon" focusable="false" aria-hidden="true">
          <use xlink:href="#arrow"></use>
        </svg>
      </div>
    </div>
  </div>
</div>

 

Copy

Light hero pattern

The light hero is used with dark images, to ensure sufficient contrast. 

<div class="nsw-hero-banner ">
  <div class="nsw-container">
    <div class="nsw-hero-banner__image-area">
      <img src="/sites/default/files/2019-12/421-2000x1250.jpg" class="nsw-hero-banner__image" alt="">
    </div>
    <div class="nsw-hero-banner__content-area">
      <div class="nsw-hero-banner__content">
        <h2 class="nsw-hero-banner__title">
          <a href="#" class="nsw-hero-banner__link">Buy Regional this Christmas</a>
        </h2>
        <p>NSW is facing one of the worst droughts on record. One of the best ways you can support regional communities in NSW is to Buy Regional this Christmas.</p>
        <svg class="nsw-icon nsw-hero-banner__icon" focusable="false" aria-hidden="true">
          <use xlink:href="#arrow"></use>
        </svg>
      </div>
    </div>
  </div>
</div>

 

Copy

The hero pattern allows you to use high quality imagery to complement important concepts or ideas.

Place the hero at the top of the main content area as the central point of focus on the page. 

Use the hero pattern to promote a product, service or special event, keeping the title and description brief and to the point.

Ensure the image has the focal point on the right.

Check that you retain a 'safe space' on the left of the image as you resize your browser through a full range of sizes.

The image should have an aspect ratio of 8:5 (1250px high by 2000px wide).

The highlight bar is customisable with your brand colour, where a brand exemption has been approved. 

You will need to change the nsw-primary-highlight colour in the _settings.scss file.


$nsw-primary-highlight: #d7153a !default;

Buy Regional this Christmas

NSW is facing one of the worst droughts on record. One of the best ways you can support regional communities in NSW is to Buy Regional this Christmas.