Using Links on a page

Have more questions? Submit a request

Links (or hyperlinks) point the audience to another location. Links may go to other internal pages, external websites or to media files. Anchor links direct users to a specific section within a web page. The Links component displays different links together for a specific topic.

Only use links if they help the audience

Too many links can reduce readability of the content and may cause confusion for the audience about what is important or how to complete a task. Use links only when and where necessary.

On this page


 

Using the Links component

The Links component has several variants with different options and displays. Select the variant that suits your content and in context with the overall layout of the page.

Do

  • When creating links follow the links guidelines
  • Limit of 10 items per list (break large lists up into smaller ones)
  • For external links to other websites, an external icon will automatically appear
  • Should have a heading to provide context (H2 or H3). There is an option to prevent the display of H2 headings in the page nav on Standard pages & Landing pages (in-page nav block)



Adding a Links block on a page

Landing page

You can add Links on a landing page by selecting Links on the list of content blocks.

Standard page

You can add Links on a standard page by selecting Add Links from the drop-down list of blocks.

 

Further configurations for Links

The different Variant options are:

    • None: displays as a vertical list of links without the option for a heading or summary.

    • Text links (previously inline): Displays the links in a horizontal line across the section.

    • Vertical: displays a vertical list of links with the option to include a heading and summary before the list. Only on a standard page.

    • Two up: option to include a heading and summary that displays on the left of the page, with a vertical link list on the right. Only on a standard page.

    • Chips (previously tags): to display links to popular or trending topics. Tags are generally placed near the top of the page.

    • Link list - 2 columns

    • Link list - 3 columns

    • Sub-navigation

If you are using the Sub-navigation variant, the Excluded from in-page navigation checkbox will hide the H2 heading from the in-page navigation.

The different types of links that can be used are:

    • Content: internal pages in the CMS. Start typing the name of the page to search or enter the page node number, for example /node/5215.

    • Managed Link: links that have been created in the Managed links library. Start typing the name of the link or paste the full URL in the search box to bring up the Managed link.

    • Media: resources like PDFs that have been uploaded to the media library. Start typing the name of the resource/media item to add a link to the item.

Click on Add Another item to add another link.


Trending topics navigation pattern

The trending topics navigation pattern is used on landing pages to surface user centric language and common search terms. This pattern is about being able to surface non-government style language that users for search for when we are restricted to more government based terminology.

The component to use is the Tag variant of the Links content type.

 

Guidelines

  • Trending topics can be used on full-width pages (landing pages and standard content pages)
  • Supports full width only
  • Minimum of 3, maximum of 5 (but depends on length of topic titles and how the fit on desktop and mobile)
  • Automatically displays Page title but it is recommended that you use Managed Links to shorten and make the tag label more user centric

Component breakdown

Tag content

  • Paste URL that tag is to link to
  • Mandatory

Managed link

  • Use this option to shorten and/or make the tag label more user friendly
  • Optional


Links list with Chips variant guidelines

The Chips variation has a specific purpose, which is to share important, relevant, targeted, or trending topics. You should be aware that links within the Chips variation may be replaced by with other links due to automated site personalisation. Chips should never be used for general site navigation.

Using the Chips variation

Do

  • Use only on standard or landing pages.
  • Can be used anywhere on a page, not just at the top.
  • Add a heading above your links. The heading provides important context about the links for the user. Heading examples include:
    • 'Recommended for you'
    • 'Trending topics'.
  • Can be used to link to internal pages, external websites or media files.
  • The link text (label) should be short and clear. Try to limit the text to 2-3 words. It should be sentence case without a full stop.
  • Use Managed Links to customise the label text for external links.
  • You can select ‘short title’ for internal links but check the text as it may be too vague for use as the label. (The web pages you’re linking to will need to have short titles added to them). See how to add a short title to a standard page or a landing page.
  • Do not use generic link names, such as, 'Contact us' or 'Read more'. Generic links make no sense out of context and don't tell the audience where the link will take them.
  • It’s recommended to add 3 – 5 links, although you can add up to 7 links if necessary.

Don’t

  • Do not use for generic navigational links. This dilutes the importance and prominence of the component.
    • Instead, consider using Cards, other Link List variations such as the sub-navigation links instead for navigational links
  • If the link is associated with a task, such as registering or booking, a call-to-action (CTA) button should be used instead. Find out more about buttons.
  • Don’t use more than 1 on a page.

Learn more about using links on nsw.gov.au.


 

See links on nsw.gov.au

Check out Links to see how this works on a live page.

Need any more help?

If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful