- Added on: v4.3.0 (12/10/18)
Full width form
These templates show the structure of the main template pages within the Framework, in this case a full width form 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 form layout specifics
Desktop:
- Padding above section is 80px
- No padding below section
- Padding below last section on page is always 60px
- Section content can span up to 12 columns (full width)
- Page title follows the same padding rules as the section
Tablet / Mobile:
- Padding above section is 60px
- No padding below section
- Padding below last section on page is always 40px
- Section content can span 8 columns on tablet and 4 columns on mobile (full width)
- Page title follows the same padding rules as the section
Interactive examples
Full width form layout
Static examples at all breakpoints are shown below, and a working example can be seen on the full width form layout example page.
Code examples
Full width form layout
<div class="l-section l-section--in">
<div class="l-content-container">
<h1 class="a-heading a-heading--2">...</h1>
</div>
</div><div class="l-section l-section--in">
<div class="l-content-container">
<!-- Section 1 -->
</div>
</div><div class="l-section l-section--in">
<div class="l-content-container">
<!-- Section 2 -->
</div>
</div><div class="l-section l-section--in-out">
<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: