Hero banner

The hero banner reflects the goals or purpose of the product or service.

BETA Component

This component has just been released in BETA, please share your feedback with us on the Community.

Headline and copy

Introduce and give further context to the service or product.

<div class="nsw-banner nsw-banner--dark nsw-banner--wide">
  <div class="nsw-banner__container">
    <div class="nsw-banner__wrapper">
      <div class="nsw-banner__content nsw-wysiwyg-content">
        <h1>Helping you deliver great government services</h1>
        <p class="nsw-intro">Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance</p>
      </div>
      <div class="nsw-banner__box" role="presentation">
        <div class="nsw-banner__bg"></div>
      </div>
    </div>
  </div>
</div>

 

Copy

Call to action

Highlight the primary task or piece of information, and allow the user to take quick action.

<div class="nsw-banner nsw-banner--dark nsw-banner--wide">
  <div class="nsw-banner__container">
    <div class="nsw-banner__wrapper">
      <div class="nsw-banner__content nsw-wysiwyg-content">
        <h1>Helping you deliver great government services</h1>
        <p class="nsw-intro">Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance</p>
        <div class="nsw-banner__button"><a href="#" class="nsw-button nsw-button--white">View Digital Service Toolkit</a></div>
      </div>
      <div class="nsw-banner__box" role="presentation">
        <div class="nsw-banner__bg"></div>
      </div>
    </div>
  </div>
</div>

 

Copy

Featured list

Surface high priority information that is relevant and valuable to the user in order for them to access quickly.

<div class="nsw-banner">
  <div class="nsw-banner__container">
    <div class="nsw-banner__wrapper">
      <div class="nsw-banner__content nsw-wysiwyg-content">
        <h1>Helping you deliver great government services</h1>
        <p class="nsw-intro">Find the building blocks for creating user-centred digital services, as well as policy, tools and guidance</p>
      </div>
      <div class="nsw-banner__links">
        <div class="nsw-banner__list">
          <div class="nsw-banner__sub-title">Key coronavirus links</div>
          <ul>
            <li><a href="#">COVIDSafe App</a></li>
            <li><a href="#">Current COVID-19 case locations</a></li>
            <li><a href="#">Travel to and from NSW</a></li>
            <li><a href="#">Health and wellbeing</a></li>
            <li><a href="#">Business and work</a></li>
            <li><a href="#">COVID-19 testing centres</a></li>
          </ul>
        </div>
      </div>
      <div class="nsw-banner__box" role="presentation">
        <div class="nsw-banner__bg"></div>
      </div>
    </div>
  </div>
</div>

 

Copy

Banner Options

The Hero banner can be styled in different ways to effectively communicate the purpose of the product or service. 

There are 3 variants of hero banner:

Headline and copy

Displays a headline and description. Use to introduce and give further context to the service or product. This option may feature an image where it is relevant and impactful.

Call to action

Introduces a primacy call to action button. Use to highlight the primary task or piece of information, and allow the user to take quick action. This option may feature an image where it is relevant and impactful.

Featured list

Displays a list of linked content. Use to surface high priority information that is relevant and valuable to the user in order for them to access quickly. Can be used when a product or service has multiple high priority goals. List title is optional and can be removed when not required. Images and call to action buttons should not be featured with this option so the list content stands out as the main point of focus for the user. Only use with white background to ensure link style and highlight bar are readable and stand out against the background.

Hero banners capture a user's attention and are placed at the top of the main content of your main page or Homepage.

Use hero banners to:

  • introduce and give context to the product or service
  • communicate and drive users to a specific call to action

Do:

  • use simple and concise messaging
  • use descriptive call to actions so the user is aware of the action they are performing
  • ensure call to actions are relevant to your users
  • only use text and visual elements that support your primary message and do not detract from it

 

Banner Options

The Hero banner can be styled in different ways to effectively communicate the purpose of the product or service. 

There are 3 variants of hero banner:

Headline and copy

Displays a headline and description. Use to introduce and give further context to the service or product. This option may feature an image where it is relevant and impactful.

Call to action

Introduces a primacy call to action button. Use to highlight the primary task or piece of information, and allow the user to take quick action. This option may feature an image where it is relevant and impactful.

Featured list

Displays a list of linked content. Use to surface high priority information that is relevant and valuable to the user in order for them to access quickly. Can be used when a product or service has multiple high priority goals. List title is optional and can be removed when not required. Images and call to action buttons should not be featured with this option so the list content stands out as the main point of focus for the user. Only use with white background to ensure link style and highlight bar are readable and stand out against the background.

 

When to avoid

Do not use:

  • for sites or products with large volumes of content where users may search for a variety of options, consider Hero search
  • for sites or products where the primary navigation of your users is via search, consider Hero Search
  • for landing, category or content pages within a site, consider H1 and Intro text typography styles

 

Using images

When using images incorrectly, it can misguide users by detracting their attention from the main product or service goal. Test your visual elements carefully and ensure you:

  • test banner without an image and only add where it adds value to the user
  • use images that are relevant and impactful
  • use images with a vertical and horizontal centre focal point so it is always visible. Ensure the image’s focal point remains visible on large and small screens

Do not:

  • add for decorative purposes only

 

Dark and light versions

By default, the background of the hero banner is NSW Primary Blue to visually separate the component from the surrounding content and draw the users attention. If the NSW Primary Blue is too heavy or creates too much visual noise, the light version can be used.

 

Acknowledgments

Thank you to the below teams that helped us develop this component: 

  • NSW.gov.au Team