Related Links


The related links module shows the user links to pages that provide a relevant onward journey.


The related links module provides the user with an alternative way of navigating our site, leading them to content which relates to what they are already looking at.

We have two ‘loudness’ versions of the related links module, each with a specific purpose.


Loud version

The standard loud version uses ghost buttons to direct the user to related content. This has been designed to be used in places where users are browsing on a broader scale, such as on topic pages. The ghost buttons draw attention to other places a user can browse and demonstrates the breadth of content we have available.

Unlike the quiet variant, this doesn’t have any hierarchy. The ghost buttons used are all at the same size as each other.

Related Links Small
Related Links Medium
Related Links Large
Live example

Quiet version

The quiet version has been designed to be used on pages where the user is more focussed, such as on course description pages. We don’t want to distract them by directing them elsewhere unnecessarily, but we want to allow them to discover more if they decide to move on. This varient should be used towards the bottom of the page, after any course/program/degree specific content. It is usually used in conjunction with the recommended content module.

This version uses text links and no section header, with copy size showing the hierarchy of category and topic, if necessary. It can also include a ghost button if needed.

Related Links Quiet Topics Button
Live example

Collapsable version

The related links can also be used towards the top of a page, providing an overview of other content within the same section and an easy way to navigate to it. For example, we use it on the category pages to show what topics we have in that area and to link out to these pages.

Used in this way, the module should toggle on small screens.

Related Links Toggle Small
Live example

Added by: