- Added on: v4.3.0 (12/10/18)
66-33 rhs form layout
These templates show the structure of the main template pages within the Framework, in this case a 66/33 split form layout with a right hand sidebar.
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
66/33 right-hand sidebar form layout specifics
Desktop:
- Padding above section is 80px
- No padding below section
- Padding below last section on page is always 60px
- Main content can span up to 8 columns
- RHS content spans 4 columns
- RHS is horizontally aligned with the top of the first section (if a page title is used, the RHS is aligned with whatever content sits underneath it
- If the RHS is longer than the main content, the 60px bottom padding rule applies to the RHS
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)
- RHS content spans 8 columns on tablet and 4 columns on mobile (full width)
- RHS content stacks underneath the rest of the page content (in the same vertical order)
Interactive examples
66/33 right-hand sidebar form layout
Static examples at all breakpoints are shown below, and a working example can be seen on the 66/33 right-hand sidebar form layout example page.
Code examples
66/33 right-hand sidebar form layout
<div class="l-content-container">
<div class="l-columns l-columns--66-33-large u-margin--top-none u-margin--bottom-none">
<div class="l-columns__column">
<div class="l-section l-section--in">
<!-- Section 1 -->
</div> <div class="l-section l-section--in">
<!-- Section 2 -->
</div> <div class="l-section l-section--in-out">
<!-- Last section -->
</div>
</div> <div class="l-columns__column u-margin--top-none">
<div class="a-divider-line a-divider-line--horizontal-solid a-divider-line--columns"></div> <div class="l-section l-section--in-out">
<!-- Right hand sidebar -->
</div>
</div>
</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: