Guidance

The hero banner component is the first section that a user sees and is used to provide an impactful introduction to the product, service, or information. This component has two styles - the default hero banner with a coloured background and the big hero banner with an image background. The hero banner with a colored background should be used for most pages. The big hero banner with an image background should be reserved for top-level pages, such as a landing page or home page. Both styles include the following features:

• Heading: The heading is the <h1> title of the page or application.
• Lead: The lead is a secondary line of text that appears below the heading. It provides a short introduction or summary of the most important information on the page. The lead should only be one sentence.
• Breadcrumbs (optional): When using a hero banner on a page, the breadcrumbs component is placed inside of it so that it inherits the background colour of the hero banner. The breadcrumbs component should be used on all pages that are more than one level deep, but are optional for top-level pages, or service pages where the user is completing a form or transaction.
• gnb-call-to-action button (optional): The gnb-call-to-action (CTA) button is used to prompt the user to take a specific action. The gnb-call-to-action button should be clear, concise, and communicate the desired action. The CTA button should be used sparingly and reserved for use with the big hero. For other page types, use gnb-call-to-action within the page content instead.
• Background colour or image: The background of the hero banner component can be either a Government of New Brunswick brand colour, or an image.

Hero banner green

The green hero banner is the default hero and first choice for use on most pages.

<section class="gnb-hero-banner-green">
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="gnb-breadcrumbs-light">
				<li><a href="#">Data</a></li>
				<li>Data</li>
			</ol>
		</nav>
		<h1>Title here</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
	</div>
</section>

Hero banner blue

The blue hero banner is the secondary choice when you need more than one colour option.

<section class="gnb-hero-banner-blue">
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="gnb-breadcrumbs-light">
				<li><a href="#">Data</a></li>
				<li>Data</li>
			</ol>
		</nav>
		<h1>Title here</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
	</div>
</section>

Hero banner black

The black hero banner is reserved for promotional, project or initiative websites requiring a neutral colour option.

<section class="gnb-hero-banner-black">
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="gnb-breadcrumbs-light">
				<li><a href="#">Data</a></li>
				<li>Data</li>
			</ol>
		</nav>
		<h1>Title here</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
	</div>
</section>

Big hero banner with image

The big hero banner with image component should be reserved for top-level pages such as a home page, landing page or major theme or topic. For other page types, use the default hero banner with background colour.

Add your custom background image using inline CSS. Your image will resize to the width of the screen. The ideal image size is between 1440px and 1920px wide, a maximum of 1080px tall, and optimized to be 160kb or less. This component will add a black overlay to ensure there is enough contrast between the image and text, however light or bright images are not recommended. Your custom image must not contain text, logos, illustrations or appear blurry, distorted or pixelated.

You can use a free, open-source online tool like Squoosh to crop, optimize and resize your images.

<section class="gnb-big-hero-banner-img" style="background-image: url(../img/your-image.jpg)">
	<div class="container">
		<h1>Lorem ipsum dolor New Brunswick</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
	</div>
</section>

Big hero banner with image and breadcrumbs

Adding the breadcrumbs component to the big hero banner is optional, but it should be used on all pages that are more than one level deep.

<section class="gnb-big-hero-banner-img" style="background-image: url(../img/your-image.jpg)">
	<div class="container">
		<nav aria-label="breadcrumb">
			<ol class="gnb-breadcrumbs-light">
				<li><a href="#">Data</a></li>
				<li>Data</li>
			</ol>
		</nav>
		<h1>Lorem ipsum dolor New Brunswick</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
	</div>
</section>

Big hero banner with image and gnb-call-to-action

Adding a gnb-call-to-action button is optional, and should be done sparingly. Only use a gnb-call-to-action to prompt the user to take a specific action. In most cases, it's better to use a gnb-call-to-action within the page content instead, so you can provide the user with more context before they act. Never use more than 2 buttons total, and never use more than 1 primary action button.

<section class="gnb-big-hero-banner-img" style="background-image: url(../img/your-image.jpg)">
	<div class="container">
		<h1>Lorem ipsum dolor New Brunswick</h1>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
		<p>
			<a href="#" class="gnb-btn">Call to action</a>
		</p>
	</div>
</section>

Service banner

A compressed version of the hero banner to use on service/task pages.