Use a text link to navigate to other pages or anchor points.
There are 2 variants
1. Default
2. Opens in new window
Usage
If the link will open in a new window or application, use the ‘opens in new window’ icon.
If there are a long list of links that the user should choose from, use the ActionList component instead.
Use a text link when displaying a phone number or email.
Do not use links when the user is required to take an action.
Writing a text link
- Read just the words that you’ve hyperlinked. Do you know what you’re getting?
- Now double check. Are you linking as few words as possible?
Matching our tone of voice
Hyperlinks will follow the tone of the sentence they fall in. Read our tone of voice guidelines for details.
- Link just enough text to make it clear where the link leads
- Be clear about what the user will see from the link – if that’s not easy to do, consider formatting it as a secondary instead
- If the link points to a page where a user would take an action, use actionable language for the link
- Don’t link an entire sentence – 5 words maximum
- Don’t have a text link on it’s own outside of paragraph copy
- Don’t use more than one textlink per section of text
Examples
Find out about OVO plans
Read the PAYG Terms & Conditions
Use our Direct Debit calculator
Choose a plan that suits you
Click here
Find out more
Check it out
Click for more
Go green for the planet and your pocket
Plan Zero is our commitment to becoming a net zero carbon business by 2035.
So, what is Plan Zero?
It’s our commitment to being a net zero carbon business by 2035. We’re doing this by helping our customers half their carbon footprint at the same time.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
v1+ |
Related
External links