🔹 Needed for NSW Government Branding
The NSW Government header displays across the top of all NSW Government sites. It helps users see which service they are using.
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.
The header sits under the masthead on all NSW Government websites, products and services.
There are two versions of the header:
The masterbrand header contains the NSW Government logo and site descriptor (site name), with optional secondary descriptor and search.
The co-brand header contains the NSW Government logo and co-brand logo, with optional search.
The default header caters for square logos. A class can be added for rectangular logos to ensure logos are visually equal in size, in line with brand guidelines.
There are also two mobile header options depending on your logo’s width:
Horizontal stacked: On mobile the NSW Government and co-brand logo will appear side by side. Consider this option when the co-branded logo does not exceed 130px in width when at 48px in height. If it does, always test to ensure it does not overlap search and menu functions on smaller devices.
Vertical stacked: On mobile the NSW Government will appear on top of the co-brand logo. Consider this option when the co-branded logo does exceed 130px in width when at 48px in height.
The NSW Government logo reinforces the connection to NSW Government and should always appear in the top left to create a consistent experience across digital product or services. It should appear no smaller than 76px on large screens and never smaller than the co-branded logo.
Descriptor: Where it is important for a customer to identify a department or agency within NSW Government, a descriptor can be used. 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. Usage for this requires approval from the NSW Government Brand Team. The secondary descriptor is located directly under the primary descriptor in smaller font.
The search displays on the right hand side and can be omitted if not required.
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.
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.