Sections

Sections are full-width coloured stripes with variants which allow different vertical spacings to be chosen; they can be used to chunk information into manageable sections or highlight key pieces of information.

Sections can be coloured in any one of the light or dark accent colours documented in the style guide and can contain most components within the Framework (with the exception of the global masthead, footer and contextual help).

• For detailed guidance on colour rules please refer to the style guide
• In/out sections should always be used with the u-margin--top-none and u-margin--bottom-none helper classes to ensure the required spacings; for detailed guidance on using in/out sections, please refer to the Form documentation page

• Do not nest sections within sections.
• Do not nest sections within content containers.The only exception to this rule is when creating layouts with columns - see Single page form template for an example and documentation.
• Sections with accent colours must not sit one after the other; there should always be another section coloured white or grey in between.

Examples

Notes for developers

All content within #main must be wrapped inside a div with class section to ensure the correct spacing is maintained.

To ensure spacing between elements and the top and bottom of section, use the utility classes u-margin--top-none and u-margin--bottom-none

Multiple sections can be applied to a page to create striped/banded layouts such as on the loyalty page example.

Sections must always wrap l-content-container.

Do not nest sections within sections.

Code Examples

<div class="l-section [ Modifiers ]">
	...
</div>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.