Text links
A text link is a piece of text that contains a hyperlink to another page. The link could take users to another page within the site they’re on, or take them to another site.
How to use text links
Always user anchor text rather than inserting the link as a visible URL. Make sure your anchor text is descriptive and clear so users understand what to expect when they click the link. For example, ‘How to apply for funding’ rather than just ‘Read more’.
If the link goes to an external site, make sure the link opens in a new window so we don't lose the user. Our external link option in the CMS does this for you.
There are a few different link styles you can use:
- Standard text link - use this if the link appears in the middle of a sentence, for links that provide extra information rather than a key CTA
- CTA link styling - use this for links that are key CTAs that link to another page in the same site. These should never appear in the middle of a sentence
- Download link - use this if the link downloads a file
- External link - use this if the link takes users to a different site
Adding a text link in the CMS
Some components and templates already have links included which you can edit. You can also add a new link using the rich text editor, or by adding a link or download link component.
- Highlight the piece of text that will form your anchor, then click ‘insert/edit link’, and either paste in your URL, select an internal page or select a file to download
- If your link is an external link, select the ‘opens in a new window or tab’ option when creating the link to display the external link icon and include the SR-only code
- If the link is an internal CTA, select ‘Text CTA’ under ‘Buttons & Links’ within the formats function to display the internal CTA icon
- If your link is a download, select ‘Download link’ under ‘Buttons & Links’ within the formats function to display the download icon and file information
- Add the link component to a panel or component
- Click ‘add’, and either paste in your URL or select an internal page
- Add a link title (this is the text which will display as the anchor)
- If your link is an external link, select the ‘opens in a new window or tab’ option when creating the link to display the external link icon
- If the link is an internal CTA, toggle on the ‘Show TextCTA icon’ option to show the internal CTA icon
- You can also opt to display the link as a button or secondary button
- Add the download link component to a panel or component
- Select the file that’s to be downloaded and add a link title (this is the text which will display as the anchor)
- The file information such as file type and size will display automatically, but you can select the ‘Show information in new line’ toggle to move this information underneath the link rather than in line
- You can also choose to display the link as a button
Text link modifier rules
There are no specific modifiers for text links. Follow the modifier rules for whichever component you're adding the link to.
Accessibility
Make sure there’s enough space between links so that users don’t click or tap the wrong one by accident. Reducing the number of links in a section can help with this.
If a link is opening in a new window, always warn the user. Opening a new window automatically can be disorientating for people who have difficulty seeing visual content. You can do this by selected the ‘Opens in a new window or tab’ option in the CMS. This will automatically add an external link icon and screen reader only text.
You should also warn the user if the link is going to download something. Tell them the file type and size. This should populate automatically when you use the download link component or download link styling.
Always use anchor text instead of displaying the full URL. Some screen readers may read out the URL letter by letter.
Evidence and research
We have reduced the amount of link and button styles. Using less styles means users can quickly identify where they can click and reduce the probability of overlooking important links. In testing users have been able to clearly recognize the link and button styles.