Category header

Digital pattern library

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.

St Andrews skyline and view of Dundee

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
Solid background
Web application

Image background with transparent overlay

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

Category title

Code

<!-- Begin pattern: category-header //-->
<div id="category-header">
    <div class="transparent-overlay">
        <div class="container">
            <h2><a href="#">Category title</a></h2>
        </div>
    </div>
</div>
<!-- End pattern: category-header //-->

Solid background

Category title

Code

<!-- Begin pattern: category-header //-->
<div class="category-header-solid" id="category-header">
    <div class="transparent-overlay">
        <div class="container">
            <h2><a href="#">Category title</a></h2>
        </div>
    </div>
</div>
<!-- End pattern: category-header //-->

Web application

Code

<!-- Begin pattern: category-header //-->
<div class="category-header-solid" id="category-header">
    <div class="transparent-overlay">
        <div class="container">
            <h2><a href="#">Web application</a></h2>
        </div>
    </div>
</div>
<!-- End pattern: category-header //-->