- Added on: v4.3.0 (12/10/18)
Login / register form layout
These templates show the structure of the main template pages within the Framework, in this case a login / register 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
Login / register form layout specifics
Desktop:
- Padding above section is 80px
- No padding below section
- Padding below last section on page is always 60px
- Section content sits within the centre 6 columns
- Section content is left aligned
- The page heading is included in the top section
Tablet / Mobile:
- Padding above section is 60px
- No padding below section
- Padding below last section on page is always 40px
- Section content sits within the centre 6 columns on tablet and 4 columns on mobile
- Section content is left aligned
- The page heading is included in the top section
Interactive examples
Login / register form layout
Static examples at all breakpoints are shown below, and a working example can be seen on the login / register form layout example page.
Code examples
Login / register form layout
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: