The Link component is a way for developers to quickly apply consistent web link styling while also providing global guidance for designers. There are two main styles of links for different use cases. This component is also called Anchor.
Standalone
The standalone option is to be used by itself, on its own line, and never within a sentence or paragraph. It must always be used with an icon before or after. The styling for a standalone link is "Text" colour text and "Link" colour icon. The underline appears on hover.
Inline
The inline option is mainly used for links that appear within a sentence or paragraph, with or without an icon before or after. It can also be used on its own without surrounding text but only when presented in "Link" colour with an underline and no icon.
User experience
Since the inception of the internet, links have been integral for navigation, and still are to this day. They are defined by underlines, an established convention that is instantly recognisable. Any deviations need another strong signifier such as an icon to avoid impacts to usability, optimisation, and accessibility.
By establishing consistency across all web interfaces and across all brands we are optimising the experience for customers and meeting the highest accessible standards. If you’re unsure if a link is accessible, consult an accessibility manager to explain the use case and context.
Standalone links produce an underline for the text on hover while inline links remove the underline on hover. These small degrees of interaction assist those with motor and cognitive challenges to identify when they’ve interacted with the link.
Link lists
The most accessible way to present a list of links is to use the List component. It can be configured as a list of links which is better for screen reader users to navigate.
Visual Design
The standalone link uses a "Link" colour for the icon and "Text" colour for the text. In testing, using the "Link" colour for the text became overwhelming on a page which may contain many links.
The inline link uses a "Link" colour for the text and if using an icon, it too uses the "Link" colour.
Exceptions
There are exceptions to using underlines and these use cases require an accessibility manager to review and approve. Examples are menus, header or footer navigation, or other lists which could be interpreted as a menu in page.
Where is this available?
The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.