Column layouts
There are a number of column combinations available to help create interesting page layouts.
Find them in
/SharedResources/MiniTemplates/Column-Layouts
2 columns 15/85
15% column
Often used for numbers and dates.
85% column
This column has been used for information that corresponds to a number or date in the left column. An example of this can be found on the 7-step visa application process page.
2 columns 25/75
25% column
Often used for numbers and dates or general titles.
75% column
This column has been used for information that corresponds to a number or date in the left column. See an example of this on the Human Rights Law Centre website.
2 columns 30/70
30% column
This popular column combination and is used over 4200 times across the UK website. It's perfect for a brief page introduction and relevant on-brand image.
The text in this column should not fall below the bottom of the image on the right.
Any additional text should be added beneath this mini template for best results.
70% column
2 columns 50/50
50% column
This mini template works really well on pages where you have a fair amount of text and an image to accompany it. Our Charity Gateway page has used this layout nicely to chunk information - aiding eye flow.
There are over 4880 instances of this on the UK website.
50% column
2 columns 70/30
70% column
This is by far our most heavily used column combination and is used over 7650 times across the UK website. Its main use is to have general content and imagery in the left column and important links in the right column like with the Services for Students website.
30% column
3 columns 30/30/30
30% column
A great use (most common) of three columns is to link users to key information. See a great example on the Study with us website.
30% column
Three columns are often used on school and faculty homepages to display news, events and useful links.
30% column
4 columns at 25%
25% column
Four column layouts can work well on full width homepages.
25% column
The four column layout isn't used much on standard pages but works really well on full width pages.
25% column
You might use this layout to display icons with a short amount of accompanying text to more information.
25% column
5 columns at 20%
20% column
Five columns are the least used mini template on the University website.
20% column
That is because the columns are very narrow.
20% column
The main use is to show partnership (or similar) logos and iconography.
How columns work on mobile (responsive columns)
The below layouts explain how columns fall under one another on mobile devices.
Regular columns
Column A1
This is the top most column.
Column A2
This falls below column A1.
Column B1
This falls below column A2.
Column B2
This falls below column B1.
Column B3
This falls below column B2.
Column C1
This falls below B3.
Column C2
This falls below C1.
Column C3
This falls below C2.
Column C4
This falls below C3.
Nested columns
Column D1
This is the top most column.
Having lots of content within this column, including other column combinations will increase the length of the column! Anything in column D2 will fall beneath everything within D1.
Column E1
This is the first column within D1.
Column E2
This falls below column E1.
Column D2
This falls below D1.