Header
Header helps users understand what a page is about. It appears at the top of the page, above the main body text. The header text is styled as a level 1 heading (H1). The size and style of a page's header depends on its position within the website hierarchy. Headers for level 1, level 2 and level 3 pages are all distinct.
2.0.1
28 Nov 2019
Home page header
The home page header is only used on the home page, or in exceptional cases like promotional pages. It is the largest banner, giving it the greatest visual prominence.
Level 1 Faculty landing header
Level 1 pages – such as the faculty landing pages – use a header that is shallower than the home page header while still featuring a full-width image. These headers are 520 pixels in height, with the H1 appearing on the left side.
Marketing page header
Pages created for specific marketing purposes use a header that is 420 pixels in height and features a full-width image, with the H1 appearing on the left. The images used in this type of header should be highly engaging.
Area of study header
Headers used on Area of Study pages are 420 pixels in height, with H1s featured on the left. Images are full-width, and should serve to support the content of the page.
Level 2 header
In the header for level 2 pages, the image appears on the right side of the banner while the left side is a solid colour containing the page's H1. Images are 970 pixels wide and 420 in height.
Level 3 header
Level 3 pages – such as department landing pages – use a shallower banner than level 2 pages. The image appears on the right side of the banner, while the left side is a solid colour containing the H1. Images are 930 pixels wide and 265 in height.
Level 4 header
Level 4 headers and below do not contain images. The left side is a solid colour containing the H1, while the right side is left blank.
Best practice
Purpose
Headers should contain an informative H1 and an engaging image to introduce the page. Don't bombard users with any additional functionality.
Design
Do not adjust the height of any banner – this will break the hierarchy for all banners.
Image
Use high resolution images in banners to ensure the picture is clear even on large screens. Images should communicate the subject matter of the page, and must not contain any text as this will distract from the heading.