Multi-link web parts

A multi-link web part can be used on landing pages where you have several sections below it and you want to display a few links from one section​. These are particularly useful on large section landing pages, such as Children, families and education or Northamptonshire Highways.

Multi-link web parts

How to format the multi-link web parts

These web parts should be used in the 3-across format to ensure they display correctly on the mobile screen (if you use 4-across they will be squashed to 2-across on a mobile and this can cause the images and some text to be obscured). There can be exceptions to this if the target audience uses mainly desktop to access and as long as there is no text being obscured.

Each group of links needs to have a representative image, added at the correct rendition for the web part width. This should be followed by 3 or 4 links to pages in that area. The bottom link should begin 'See all...' and link to the main page for the section. The 'See all...' link will be automatically formatted differently.

For corporate-themed sites, the heading for each multi-link web part will take the corporate purple colour (theme colour) and links will automatically have a grey background colour with black text. The 'See all' link will have a darker grey background colour and black text by default.

You will need to set the following:

  • Links text hover colour = white
  • Links text hover background colour = #7f1183

This will turn links to purple on hover.

Spacing around multi-link web parts

For the first row of multi-link web parts, top margin should be 30px and top padding should be 15px. Bottom margin and padding should be set to 0px.

If you are using a second row of multi-link web parts, set the top margin and top padding to 0px as well as the bottom margin and padding.