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.
Rules for 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 1905 × 120 pixels and 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)
Suitable background images
- The background image must not be overly complicated so the main focus is the header text.
- Photographs of the St Andrews skyline including a view of the horizon are recommended.
- Photographs including people are discouraged in category headers.
Options available
Image background with transparent overlay
An image with a transparent colour overlay or a solid colour may be used for the background.