eServices Header
For ease of access, we have created a modified version of the GNWT flagship site header for utilizing on the external eServices Portal platform called "CitizenOne".
Modifications
The HTML markup of this component has had the following elements within the markup modified to retain functionality.
Noto Sans Google Fonts links
For convenience, the google font links documented in the Getting Started For Developers page has been added directly to the header HTML.
Menu links
Menu links have been updated to represent full paths to the GNWT flagship website instead of relative paths. The purpose of this is to ensure that the menu links in the header point to the correct location on the flagship site.
Search action
The search input form in the header HTML snippets here point to the full path for searching the flagship website from an external platform.
GNWT eServices Design System CSS Bundle
The GNWT E-Services Design System CSS bundle provides the core styles needed to apply the GNWT approved visual design. It includes the full set of design tokens and element styles used in the GNWT Flagship website, compiled into a single CSS file.
This bundle is tailored specifically for the CitizenOne platform and excludes Bootstrap's utility class styling. CitizenOne already includes Bootstrap's utility classes in it's own bootstrap CSS bundle and by excluding them we avoid conflicts and keep the CSS bundle lightweight.
CSS • 165.94KB • Mar 19, 2026
English Header
Used for authenticated (logged-in) CitizenOne pages in English.
Displays the GNWT logo, bilingual language switcher, search bar, user account button, and menu toggle. This is the standard header configuration for most signed-in user views.
French Header
Used for authenticated CitizenOne pages in French.
Mirrors the default header layout but localizes all text and labels into French, ensuring full bilingual accessibility for Francophone users.
English Header - Unauthenticated
Used on public or pre-login CitizenOne pages in English.
The user account button is hidden, emphasizing the search and navigation functions. Suitable for anonymous visitor pages before authentication.
French Header - Unauthenticated
Used on public or pre-login CitizenOne pages in French.
Same structure as the unauthenticated English version, with localized French text and UI elements to support bilingual access for non-authenticated users.