Digital pattern library

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

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.

St Andrews skyline and view of Dundee

Category header Photoshop template (PSD, 3.2 MB)

Suitable background images

Options available

Image background with transparent overlay

An image with a transparent colour overlay or a solid colour may be used for the background.


Solid background


Web application