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:

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.

Montes sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
html
            Montes sociis natoque penatibus et magnis dis <a class="rc-styled-link" href="#/">parturient montes</a>, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
        

Visited

Default hyperlinks are coloured with ‘Secondary Text’ when at the visited state. CTA hyperlinks retain their default state colour ‘Primary Brand1’.

Montes sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
html
            Montes sociis natoque penatibus et magnis dis <a class="rc-styled-link" href="#/">parturient montes</a>, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
        

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.

Montes sociis natoque penatibus et magnis dis parturient montes
html
            Montes sociis natoque penatibus et magnis dis <a class="rc-styled-link--cta" href="#/">parturient montes</a>
        

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.

Montes sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
html
            Montes sociis natoque penatibus et magnis dis <a class="rc-styled-link--external" href="#/">parturient montes</a>, nascetur ridiculus mus. Curabitur blandit tempus porttitor.
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 13th September 2018 [ui_assets/elements/hyperlinks.yml]
    Spelling/ grammar
  • 12th July 2018 [ui_assets/elements/hyperlinks.yml]
    Prefixed classes throughout the portal with rc-.
  • 8th March 2018 [ui_assets/elements/hyperlinks.yml]
    Ordered elements alpabetically
  • 7th March 2018 [ui_assets/elements/hyperlinks.yml]
    Made all example links into 'fake' links
  • 5th February 2018 [ui_assets/elements/hyperlinks.yml]
    Removed extra line from hyperlink example
  • 22nd January 2018 [ui_assets/elements/hyperlinks.yml]
    Added new hyperlink styles to portal.
  • 20th December 2017 [ui_assets/elements/hyperlinks.yml]
    Fixed documentation that wasn't render or missing.