- Taxonomic name: L-SECTION
- Added on: v3.0.0 (15/09/17)
- Updated on: v4.0.0 (20/07/18)
Section
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.
Design and usage
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-noneandu-margin--bottom-nonehelper 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
Interactive example
Code example
<div class="l-section [ Modifiers ]">
...
</div>Development and test
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.
Sections must always wrap l-content-container.
Do not nest sections within sections.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.l-section |
Base style for sections of content | Yes | div |
Must always wrap l-content-container. Designed to span full width. |
.l-section--highlight |
Modifier to increase top and bottom padding | .l-section |
||
.l-section--primary |
Modifier to increase top and bottom padding | .l-section |
Functional module section container | |
.l-section--secondary |
Modifier to reduce top and bottom padding | .l-section |
Specialised module section container | |
.l-section--in-out |
Modifier for standard section padding for brochureware and forms | .l-section |
D: 80px top/60px bottom; T: 60px top/40px bottom; M 40px top/40px bottom | |
.l-section--in |
Modifier for standard section padding for brochureware and forms - top padding only | .l-section |
D: 80px top/0px bottom; T: 60px top/0px bottom; M 40px top/0px bottom | |
.l-section--out |
Modifier for standard section padding for brochureware and forms - bottom padding only | .l-section |
D: 0px top/60px bottom; T: 0px top/40px bottom; M 0px top/40px bottom | |
.l-section--none |
Modifier for standard section padding for brochureware and forms - no top or bottom padding | .l-section |
D: 0px top/0px bottom; T: 0px top/0px bottom; M 0px top/0px bottom | |
.l-section-legal-notice |
Modifier for standard section text font-size to 0.875em (14px) | .l-section |