Signpost - Usage

Basic Guidelines

The Signpost serves as a clear and concise navigational element. It includes an image to provide visual cues to the user.

Use a maximum of four signposts in a group

Signposts are designed to be eye-catching elements that act as clear markers moving the user to another destination. Adding too many Signposts into a design can compromise this purpose and risks overcrowding the page as well as overwhelming the user.

Signposts must always be used with an image

Removing the image would no longer make it recognisable as a Signpost component and would compromise the design.

Signposts must always have a heading

Removing the heading would no longer make it recognisable as a Signpost component and would compromise the clarity of its purpose.

Use short messaging

Signposts should be used with short concise phrases to provide a clear call to action. Therefore a maximum of two lines of copy should be used. Avoid long phrases that run over three or more lines.

Alignment

Signposts must align with the grid system as set out in Foundations. They should always be centre aligned across the page.

The example below shows the placement of Signposts on a 320px breakpoint. Each Signpost sits over two columns, with a 16px gap between rows.

Example of one Signpost on 320px viewport.

Example of two Signposts on 320px viewport.

Example of three Signposts on 320px viewport.

On larger viewports, the Signposts sit on just one line, always centred align with each covering two columns.

Example of one Signpost on larger viewport, scaled down for illustrative purposes.

Example of two Signposts on larger viewport, scaled down for illustrative purposes.

Spacing

When there is more than one row of Signposts on mobile, there should be a 16px gap between each row.