Link
Use the link components for when your link is outside a paragraph. Links may be isolated, stacked vertically in a list. Links should navigate you to a new page, internally or externally, back or to further information.
On this page
Interactive Demo
This demo lets you preview the link component, its variations, and configuration options.
Component Variations
There are 4 link variations.
1. Links
A link is a standalone link that is used in isolation and not as part of surrounding body text. Standalone links should clearly describe the target destination and meet accessibility requirements, such as having a 44x44px target size.
2. Back Link
A back link is a standalone link that is used in isolation and not as part of surrounding body text. Use back link for moments where users need to navigate backwards to a previous page in a multi-page journey (linear or non-linear). Standalone links should clearly describe the target destination and meet accessibility requirements, such as having a 44x44px target size.
3. Link Out
A link out component indicates navigation to a destination outside of the current product or domain, for example external websites, partner platforms, or PDFs. This ensures users are aware they’re leaving the current experience and can make an informed choice.
4. Links List
A links list is a collection of hyperlinks grouped together, used for navigation to provide quick access to related resources. Link lists should clearly describe the target destinations and meet accessibility requirements, such as having a 44x44px target size.
What’s New
- Link updated to follow 8x system
- Removed underline on default and added chevron as visual signifier
- Introduced new styles for states hover and pressed
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.