Category header
The category header pattern has been updated so that the transparent overlay is now added using
<div class="transparent-overlay"> rather then using the <h2> element, as it was previously. This support will be removed at some point, so please do not use the old category header markup.The category header pattern contains the name of the current category or section and a link to it. In the case of web applications the name of the web application is shown in the category header.
- Must be used directly below the header and before the navigation bar.
- Web applications typically show a solid colour background, rather than the transparent background image.
- Background images must be
1905px × 120pxand created using the background image template (see above).
Background image template
The background image is used to enhance the visual identity of the page. The image must use the Photoshop template below so it can be positioned across a variety of screen sizes.
Category header Photoshop template (PSD, 3.2 MB)
What background image should I use?
- The main focus of this pattern is the header text so the background image shouldn't be overly complicated.
- Photographs of the St Andrews skyline including a view of the horizon are recommened.
- Photographs including people are discouraged in category headers.
Image background with transparent overlay
An image with a transparent colour overlay or a solid colour may be used for the background.