Emphasised link
Emphasised links navigate users to a new location when they select it. They are for links with the greatest importance.
When to use an emphasised link
Use an emphasised link to give more prominence to standalone links. For example, the ‘Open in a new tab’ links on the embedded examples below.
Our buttons documentation previously suggested using an <a> element to turn a button into a link.
An emphasised link should be used for this instead.
When not to use an emphasised link
Do not use an emphasised link if you want a user to perform an action, use a button instead.
Do not use in-line with other text. If you need to set a link in-line, use the standard text link.
Emphasised links must not be set to open in a new tab. If you need to open a link in a new tab, use the standard text link.
Types of emphasised link
There are two types of emphasised link:
- Standard
- Inverse
Standard
Use standard when it needs to be displayed against a light coloured background.
<a href="" class="p-emphasised-link">Emphasised link</a>Inverse
Use inverse when it needs to be displayed against a dark coloured background. For example, deep purple or one of the House colours.
<a href="" class="p-emphasised-link p-emphasised-link--inverse">Emphasised link inverse</a>How to write good link text
Link text should be short, accurate and descriptive. It should tell users where they will go when they click on the link. Do not use phrases like ‘click here’ or ‘read more’. They are inaccessible, particularly for screen reader users.
Have a question, suggestion or feedback?
The Improving User Experience cluster manages the design system.
If you work in Parliament, contact us on the #design-system Slack channel.