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
- Adding a Links block on a page
- Trending topics navigation pattern
- Links list with Chips variant guidelines
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.