Guidance
The masthead component is a small, full-width banner that appears at the top of a website or web application that clearly identifies that it is an official Government of New Brunswick property. This component is designed for use on websites that are not hosted on the gnb.ca domain or do not utilize the official Government of New Brunswick brand. The masthead component helps to convey trust, authority, and a consistent user experience across all GNB-affiliated websites.
Mastheads must be used in these situations:
- The website is not using the official Government of New Brunswick brand.
- The website is not on a official Government of New Brunswick domain.
Do
- The masthead component must be placed at the very top of the page, above any navigation or content.
- The masthead component should be present on all pages within the website or application to maintain a consistent user experience.
Don’t
- Add any additional information or visual elements.
- Modify the text, background colour or font, as this will result in inconsistencies with the official brand.
Masthead
The default masthead with a green background should be your first choice, however other colour options can be used if necessary.
HTML
<div class="gnb-masthead">
A <a href="https://www.gnb.ca">Government of New Brunswick</a> website.
</div>
Placement
The masthead must be placed at the very top of the page above any navigation or content to ensure visibility and establish the legitimacy and credibility of the website or application. Placing the masthead at the top of the page also helps users with screen readers or other assistive technologies more easily identify the organization and understand the purpose of the website or application.
Masthead gray
The masthead with a grey background can be used when you require a more neutral colour option.
HTML
<div class="gnb-masthead-gray">
A <a href="https://www.gnb.ca">Government of New Brunswick</a> website.
</div>
Masthead black
The masthead with a grey background can be used when you require a more neutral colour option, and specifically if the website or web application is using a dark theme.
HTML
<div class="gnb-masthead-black">
A <a href="https://www.gnb.ca">Government of New Brunswick</a> website.
</div>