Related Links

The Related Links component shows the user links to pages that provide a relevant onward journey.

How it works

This component 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.

Variants

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.

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 variant 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.

Collapsible version

The Related Links component 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 component should include an Arrow Toggle on small screens to avoid long lists of links pushing content too far down the page.

Implementation