Sections
Taxonomic name: L-SECTION
CORE COMPONENT
v.4.0.0 - Updated 20/07/18.
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
andu-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
Default
Heading
Maecenas rhoncus arcu leo, et dapibus arcu scelerisque at. Quisque pulvinar elit et volutpat rutrum. Maecenas convallis ultrices purus, eu dictum nunc molestie id. Nunc neque diam, facilisis blandit est at, sollicitudin convallis libero. Maecenas ultrices aliquet lectus, in commodo urna sagittis non. Nunc mattis elit tincidunt lectus vestibulum, ac malesuada nunc suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae urna posuere, interdum urna et, gravida nibh.
Heading
Quisque pulvinar elit et volutpat rutrum. Maecenas convallis ultrices purus, eu dictum nunc molestie id. Nunc neque diam, facilisis blandit est at, sollicitudin convallis libero. Maecenas ultrices aliquet lectus, in commodo urna sagittis non. Nunc mattis elit tincidunt lectus vestibulum, ac malesuada nunc suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae urna posuere, interdum urna et, gravida nibh.
Highlight
Heading
Maecenas rhoncus arcu leo, et dapibus arcu scelerisque at. Quisque pulvinar elit et volutpat rutrum. Maecenas convallis ultrices purus, eu dictum nunc molestie id. Nunc neque diam, facilisis blandit est at, sollicitudin convallis libero. Maecenas ultrices aliquet lectus, in commodo urna sagittis non. Nunc mattis elit tincidunt lectus vestibulum, ac malesuada nunc suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae urna posuere, interdum urna et, gravida nibh.
Heading
Quisque pulvinar elit et volutpat rutrum. Maecenas convallis ultrices purus, eu dictum nunc molestie id. Nunc neque diam, facilisis blandit est at, sollicitudin convallis libero. Maecenas ultrices aliquet lectus, in commodo urna sagittis non. Nunc mattis elit tincidunt lectus vestibulum, ac malesuada nunc suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae urna posuere, interdum urna et, gravida nibh.
Primary
l-section--primary
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
l-section--primary
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Secondary
l-section--secondary
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
l-section--secondary
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In/out sections
l-section--in-out
Section with top and bottom padding.
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
l-section--in
Section with top padding only.
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
l-section--out
Section with bottom padding only.
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
l-section--none
Section with no top or bottom padding.
Donec sollicitudin molestie malesuada. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
Code Examples
Heading
Maecenas rhoncus arcu leo, et dapibus arcu scelerisque at. Quisque pulvinar elit et volutpat rutrum. Maecenas convallis ultrices purus, eu dictum nunc molestie id. Nunc neque diam, facilisis blandit est at, sollicitudin convallis libero. Maecenas ultrices aliquet lectus, in commodo urna sagittis non. Nunc mattis elit tincidunt lectus vestibulum, ac malesuada nunc suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae urna posuere, interdum urna et, gravida nibh.
Heading
Quisque pulvinar elit et volutpat rutrum. Maecenas convallis ultrices purus, eu dictum nunc molestie id. Nunc neque diam, facilisis blandit est at, sollicitudin convallis libero. Maecenas ultrices aliquet lectus, in commodo urna sagittis non. Nunc mattis elit tincidunt lectus vestibulum, ac malesuada nunc suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras vitae urna posuere, interdum urna et, gravida nibh.
<div class="l-section [ Modifiers ]">
...
</div>
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 |