External Relations

Column layouts

There are a number of column combinations available to help create interesting page layouts.

Find them in 


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.

20% column

Our Jubilee Campus visitor information page use five columns beautifully.


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.