Triangle

There are a number of column combinations available to help create interesting page layouts. You can 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.

 

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.

 

2 columns 30/70

30% column

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

students sitting on the grass in front of Portland building

 

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.

50% column

students sitting on the grass in front of Portland building

 

2 columns 70/30

70% column

This column combination's main use is to have general content and imagery in the left column and important links in the right column.

30% column

students sitting on the grass in front of Portland building

 

3 columns 20/40/40

20% column

A three column layout with one smaller column and two even larger columns.

40% column

A three column layout with one smaller column and two even larger columns.

40% column

students sitting on the grass in front of Portland building

 

3 columns 20/60/20

20% column

A three column layout with two smaller columns either side of a larger central columns.

60% column

A three column layout with two smaller columns either side of a larger central columns.

20% column

students sitting on the grass in front of Portland building

 

3 columns 30/30/30

30% column

A great use (most common) of three columns is to link users to key information.

30% column

Three columns are often used on school and faculty homepages to display news, events and useful links.

30% column

students sitting on the grass in front of Portland building

 

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

students sitting on the grass in front of Portland building

 

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.

20% column

students sitting on the grass in front of Portland building

 

 

How columns work on mobile devices (responsive columns)