Header
Required for NSW Government Masterbrand products
The NSW Government header displays across the top of all NSW Government sites. It helps users see which service they are using.
Show code Hide code
Brand requirements
Elements required for NSW branding include the use and implementation of logos and site descriptors. View the NSW Government Visual identity system for full logo requirements specific to your brand classification.
Usage
There are two versions of the header:
Masterbrand
The masterbrand header contains the NSW Government logo and site descriptor (site name), with optional secondary descriptor and search.
Co-brand
The co-brand header contains the NSW Government logo and co-brand logo, with optional search.
Guidance
- use the default header for square logos and add the rectangular logo class where needed to ensure logos are visually equal in size
- consider the horizontal stacked mobile option, where the NSW Government and co-brand logo appear side by side, when the co-branded logo does not exceed 130px in width at 48px high, and test that it does not overlap search and menu functions on smaller devices
- consider the vertical stacked mobile option, where the NSW Government logo appears on top of the co-brand logo, when the co-branded logo exceeds 130px in width at 48px high
- use a descriptor where customers need to identify a department or agency within NSW Government.
- place the header anywhere other than under the masthead on NSW Government websites, products and services
- place the NSW Government logo anywhere other than the top left
- display the NSW Government logo smaller than the co-branded logo
- use a secondary descriptor without approval from the NSW Government Brand Team
- display search anywhere other than the right hand side, or when it is not required.
NSW Government Logo
The NSW Government logo reinforces the connection to NSW Government.
Descriptors
Descriptor: The text descriptor is treated, not as a competing logo (or coupled), but as a navigational device to help customers where they need to identify an entity.
Secondary Descriptor: In the rare case where there is a customer need to relay back to the overarching department, two descriptors can be coupled together. The secondary descriptor is located directly under the primary descriptor in smaller font.
Search
The search can be omitted if not required.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.
Ensuring compliance through usage
Redundant entry
To ensure WCAG 2.2 AA compliance for a header search component that opens upon clicking an always-visible icon, correct usage and configuration are essential. While the component is designed for accessibility, retaining any previous search entries can help reduce redundant input if a user revisits the search. The search input should have a clear, accessible label (often provided as aria-labels for screen readers) and guidance on how to use the search, such as placeholder text. Ensure the input maintains its easy-to-locate position to navigate back to, allowing users to correct or modify their query without losing previous entries.
Following these practices ensures a smooth, accessible experience that meets compliance standards.