- Added on: v4.3.0 (12/10/18)
Page structures introduction
These templates show the structure of the main template pages within the Framework and how the new vertical padding rules apply. Also included are header and navigation variations and how they sit within the page designs.
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
For usage guidelines for specific structures, please select the relevant page from the list below:
Header variants
All breakpoints:
- Spacing between Title and Sub-title is 15px
- Spacing between components is 30px
- Wayfinder sits 5px above the header title
Desktop:
- Padding above header content is 80px
- No padding below section
- Content restricted to 9 columns (long content wraps to next line)
- Padding below last section on page is always 60px
- Headers titles with a wayfinder are 80px from the masthead
- Notification in header stretches to 9 columns (longer content wraps)
Tablet:
- Padding above header content is 60px
- No padding below section
- Content restricted to 7 columns (long content wraps to next line)
- Padding below last section on page is always 40px
- Headers titles with a wayfinder are 60px from the masthead
- Notification in header stretches to 7 columns (longer content wraps)
Mobile:
- Padding above header content is 60px
- No padding below section
- Content is full width
- Padding below last section on page is always 40px
- Headers titles with a wayfinder are 60px from the masthead
- Notification in header is full width (longer content wraps)
Navigation variants
The primary tabs example is both a header and navigation for the page
Desktop:
- Padding above section / linear navigation / non-linear navigation is 80px
- No padding below section /linear navigation / non-linear navigation
- Padding below last section on page is always 60px
- Primary tabs title 80px from the masthead
- In-page nav sits below hero or section content depending on the version used it has 0px padding above and below
Tablet / mobile:
- Padding above section / linear navigation / non-linear navigation is 60px
- No padding below section / linear navigation / non-linear navigation
- Padding below last section on page is always 40px
- Primary tabs title 60px from the masthead
- In-page nav sits below hero or section content depending on the version used it has 0px padding above and below
Interactive examples
Full width form layout
Static examples at all breakpoints are shown below. For further information, see the full width form layout page.
Full width brochure layout
Static examples at all breakpoints are shown below. For further information, see the full width brochure layout page.
66/33 right-hand sidebar form layout
Static examples at all breakpoints are shown below. For further information, see the 66/33 right-hand sidebar form layout page.
Single page form layout
Static examples at all breakpoints are shown below. For further information, see the single page form form layout page.
Login / register form layout
Static examples at all breakpoints are shown below. For further information, see the login/ register form layout page.
Column structure layout
Static examples at all breakpoints are shown below. For further information, see the column layout page.
Header variants
Static examples at all breakpoints are shown below. Working examples can be found on the relevant documentation pages, including heading groups, wayfinder, notification cards, data groups and progress bar.
Navigation variants
Static examples at all breakpoints are shown below. Working examples can be found on the relevant documentation pages, including in-page navigation, primary tabs, section tabs, linear navigation and non-linear navigation.
Code examples
Main structures
For code examples for specific structures, please select the relevant page from the list below:
Header variants
Code examples can be found on the relevant documentation pages, including:
Navigation variants
Code examples can be found on the relevant documentation pages, including:
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: