Hyperlinks
As well as buttons and other ways of navigating throughout our websites and applications we are still required to provide styles for standard hyperlinks. These hyperlinks could appear stand-alone or within a paragraph for example, below are how we style standard hyperlinks: Form inputs can appear on their own row (stacked) or they can be put side by side with other relevant fields, when space is available. 16px of margin between both field input/label blocks is required.
Default
As well as buttons and other ways of navigating throughout our websites and applications we are still required to provide styles for standard hyperlinks. These hyperlinks could appear stand-alone or within a paragraph for example, below are how we style standard hyperlinks.
Using an underline and darker text colour, the contrast of our hyperlinks stand out from normal body copy. The underline styling is actually a border positioned to the bottom of hyperlinks rather than text-decoration: underline. Text decoration should be avoided to ensure that the hyperlinks can be styled and transitioned more freely - it allows us to transition the underline and change its colour separately to the hyperlink copy, which would be unavailable if using text decoration. The link copy colour is ‘Hyperlink’; this is the only place this colour is used and is to give good contrast between regular body copy and the hyperlink.
The above is for default hyperlinks only. Any other link styles such as buttons, icon only buttons and icons with labels should follow their own dedicated style formats.
<a class="rc-styled-link" href="#" aria-label="Links to example page">See more</a>Copied!
Visited
Default hyperlinks are coloured with ‘Secondary Text’ when at the visited state. CTA hyperlinks retain their default state colour ‘Primary Brand1’.
<a class="rc-styled-link" href="#" aria-label="Links to example page">Visited link</a>Copied!
Hyperlink - CTA
Call to action hyperlinks do not sit within normal body but are used to follow a section of body copy that can end with a call to action. These can be used for smaller sections of content or promotional panels or when Buttons aren’t needed because of their larger prominence such as in the following example. They are styled using a Medium weight of typeface, Brand 1 for colour and a styled bottom border.
<a class="rc-styled-link rc-styled-link--cta" href="#">Hyperlink cta</a>Copied!
Hyperlink - External
External hyperlinks inherit the same styles as the default hyperlink but also display the ‘External - Small’ icon to the right of the hyperlink text. Examples of these could be as body content links linking off to a reference article or to a product page on a retailers website. They can sit within body copy or below body copy as a stand alone element or list item.
<a class="rc-styled-link rc-styled-link--external" href="#" aria-label="Links to example page">External link</a>Copied!
Hyperlink - New Window
It is strongly recommended for accessibility that, wherever possible, hyperlinks are set to open in the same browser window, not set to open in a new window. However, where necessary the new window icon and link type can be used.
<a class="rc-styled-link rc-styled-link--new-window" href="#" aria-label="Links to example page in a new window" target="_blank">New Window</a>Copied!