Columns structure layout

These templates show the structure of the main template pages within the Framework, in this case column structure layout.

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

Column structure layout specifics

All breakpoints:

• Columns are spaced 30px apart
• Do not use a 5 column layout
• Use equal columns where possible this; helps the experience on tablet (no empty spaces)
• The unequal column layout (66/33) is only to be used when creating a right-hand sidebar page; only content design for the RHS should be able to stack on tablet and mobile
• The 50/25/25 layout nests a 50/50 layout within another 50/50 layout; this technique can be used in other instances if flexibility is needed

Desktop:

• 1-6 columns can be used on desktop
• Padding above section is 80px
• No padding below section
• Padding below last section on page is always 60px

Tablet:

• 1-4 columns can be used on tablet
• You have the choice of using a 4 column layout (either stacked 2x2 or 1 row of 4)
• Padding above section is 60px
• No padding below section
• Padding below last section on page is always 40px

Mobile:

• 1-2 columns can be used on mobile
• You have the choice of stacking the columns or using a two column layout for all sections
• Padding above section is 60px
• No padding below section
• Padding below last section on page is always 40px