- Added on: v4.3.0 (12/10/18)
Full width brochure
These templates show the structure of the main template pages within the Framework, in this case a full width brochure page.
Design and usage
Page structure generic rules
- All content (blue boxes) are shown as a guide and not to be used in final designs
- A section is defined as a block of content containing any number of Framework components (with the exception of the global masthead and footer)
- Sections with background accent colours must not sit one after the other; there should always be another section coloured white or grey in between
- Do not nest sections within sections
Full width brochure layout specifics
Desktop:
- Padding above section is 80px
- No padding below section unless the next section has a background colour in which case the 60px out rule applies
- If a section has a background colour the 80px top and 60px bottom padding rule applies
- Padding below last section on page is always 60px
- Section content can span up to 12 columns (full width)
- Keylines can be used to separate 2 sections that appear together on white backgrounds. In this case the 80px top and 60px bottom
Tablet / Mobile:
- Padding above section is 60px
- No padding below section unless the next section has a background colour in which case the 40px out rule applies
- If a section has a background colour the 60px top and 40px bottom padding rule applies
- Padding below last section on page is always 40px
- Section content can span 8 columns on tablet and 4 columns on mobile (full width)
- Keylines can be used to separate 2 sections that appear together on white backgrounds. In this case the 60px top and 40px bottom rules apply
Interactive examples
Full width brochure layout
Static examples at all breakpoints are shown below, and a working example can be seen on the full width brochure layout example page.
Code examples
Full width brochure layout
<!-- Page header -->
<!-- Page navigation (optional) --><div class="l-section l-section--in-out">
<div class="l-content-container">
<!-- Section 1 -->
</div>
</div><div class="l-section l-section--in-out [ Background colour modifiers ]">
<div class="l-content-container">
<!-- Section 2 -->
</div>
</div><div class="l-section l-section--in-out">
<div class="l-content-container">
<!-- Section 3 -->
</div>
</div><div class="l-section l-section--none">
<div class="l-content-container">
<hr class="a-divider-line a-divider-line--horizontal-solid" />
</div>
</div><div class="l-section l-section--in-out">
<div class="l-content-container">
<!-- Section 4 -->
</div>
</div><div class="l-section l-section--in-out [ Background colour modifiers ]">
<div class="l-content-container">
<!-- Last section -->
</div>
</div>Development and test
Notes for developers
The code example below shows how to set up the basic elements within a page. They are not prescriptive, as the page can contain as many sections or other elements as required, but this can be achieved easily by duplicating the required code blocks and inserting elements when required.
Documentation for other helpful modules/organisms when seting up your page may include: