Sections

Guidance

A <section> is an HTML element used to group content and components. The section component includes the following features:

• Section: An HTML element that acts as a wrapper for content and components.
• Container: Containers are used within sections to structure layouts and define the maximum width of the content.
• Spacing: Pre-defined spacing values used to apply vertical padding to the content.
• Background colour or image: The background of the section component can be white (default), gray or an image.

Section

The default element for wrapping content and components within your page. It has a white background and a responsive container used to create layouts with the grid system.

Section heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<section>
	<div class="container">
		<h2>Section heading</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		</p>
	</div>
</section>

Section gray

Section gray is acceptable to use with most content and component types, however it should be avoided for content blocks with icons and tables.

<section class="gnb-section-gray">
	<div class="container">
		<h2>Section heading</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		</p>
	</div>
</section>

Section with image

Sections with a background image should only be used to wrap content and select component types. Acceptable components include buttons, cards, alternate accordions, and content blocks (without icons).

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-section-image" style="background-image: url(../img/your-image.jpg)">
	<div class="container">
		<h2>Section heading</h2>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
	</div>
</section>

Section spacing

Sections will often have sufficient whitespace at the top and bottom provided by their child elements. For example, the top margin of the <h2> heading will provide consistent whitespace for the top of your sections. Other elements, such as <p> tags, components, or component group wrappers have bottom margins that provide enough space for the bottom of the section.

If you encounter a scenario where the section's child elements don’t provide enough whitespace, there are spacing helper classes you can use to add more padding to the section.

Helper classes

Helper classes are applied to <section>. They can either be applied evenly to both the top and bottom, or you can mix-and-match the classes to apply more or less padding to the top and bottom. Doing this may help you achieve better visual balance, and account for any spacing already provided by the section's child elements.

Example 1

In this example, the section lacks a heading. It is best practice to start new sections with an <h2> heading, which provides the required vertical space at the top of a section. In this case, we need to add some padding using a helper classes.

Example 2

Adding the .padding-top-lg helper class to the section adds the missing whitespace to the top.