Header

Displays across the top of all NSW Government sites. 

Default

The header contains the NSW Government network header, the NSW Government logo, a site name and optional search. 
<div class="nsw-infobar">
  <div class="nsw-container">
    <p>A NSW Government website</p>
  </div>
</div>
<header class="nsw-header">
  <div class="nsw-container">
    <div class="nsw-header__wrapper">
      <div class="nsw-header__center">
        <a href="#" class="nsw-header__logo-link">
          <svg class="nsw-icon nsw-header__logo" focusable="false" aria-hidden="true">
            <use xlink:href="#dpc-logo"></use>
          </svg>
          <span class="sr-only">NSW Department of Premier and Cabinet</span>
        </a>
      </div>
      <div class="nsw-header__left">
        <button type="button" class="nsw-header-btn nsw-header-btn--menu">
          <svg class="nsw-icon nsw-header-btn__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#menu"></use>
            <span class="nsw-header-btn__sub"><span class="sr-only">Open</span> Menu</span>
          </svg>
        </button>
      </div>
      <div class="nsw-header__right">
        <button type="button" class="nsw-header-btn nsw-header-btn--search js-open-search" aria-expanded="false"
          aria-controls="header-search">
          <svg class="nsw-icon nsw-header-btn__icon" focusable="false" aria-hidden="true">
            <use xlink:href="#search"></use>
          </svg>
          <span class="nsw-header-btn__sub"><span class="sr-only">Show</span> Search</span>
        </button>
      </div>
    </div>
    <div class="nsw-search">
      <div id="header-search" class="nsw-search__area js-search-area" hidden>
        <form role="search">
          <label for="nsw-search__input" class="sr-only">Search site for:</label>
          <input autocomplete="off" class="nsw-search__input js-search-input" id="nsw-search__input"
            name="input-autocomplete" type="text">
          <svg class="nsw-icon nsw-search__search-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#search"></use>
          </svg>
        </form>
        <button class="nsw-search__close-btn js-close-search" aria-expanded="true" aria-controls="header-search">
          <svg class="nsw-icon nsw-search__close-icon" focusable="false" aria-hidden="true">
            <use xlink:href="#close"></use>
          </svg>
          <span class="sr-only">Close search</span>
        </button>
      </div>
    </div>
</header>

 

Copy

The consistent placement of the network header helps our customers easily trust and identify our websites.

The logo further reinforces this and helps to identify which department or agency they're interacting with.

The search displays on the right hand side where users expect it to be.

To be used for all NSW Government websites, products and services. 

Logos

By default, the lock-up is a co-brand of the NSW Government logo and and the department or agency name. If using the default, ensure the NSW Government logo remains the same size and your logo does not exceed 60px in height. The lock-up between the NSW Government logo and your logo must remain the same. See the logo placement page for more details.

If you have a brand exemption, replace the logo with your own. You need to use a maximum height of 60px.

Search

The optional search can be omitted if it's not required.