Hyperlinks are used only in-line within blocks of text. If you need a link outside of text use a tertiary button instead
All in-line links
Structure
- All links and basic link icons built to work on light and dark accent colours.
Accessibility and screen readers
- It must be understandable from the copy within the anchor tag where the link is going, even when removed from context.
- When a link needs to be more descriptive of what / where it is going, but there is a requirement to show simplified text, the additional text can be hidden visually - see developer notes for how to achieve this.
- PROHIBITED: Anchors must not open in a new window, eg.
target="_blank"
, unless it would disrupt a user's journey (for example, when within a large form). Read more about opening links in new windows.
Placement
- To be used in-line within blocks of text
- PROHIBITED: Not to be used outside of text blocks - use buttons instead
Links with icons
Structure
- The icon always follows the text, never before it
- Text is always bold weight, underlined
- Padding between text and icon is 5px
- First letter case is dependent on it's location within a sentence eg. if the link follows a fullstop it's first letter is capitalised; otherwise, it is lower-case
- PROHIBITED: There are some buttons with icons that aren't available as in-line links with icons
- PROHIBITED: Changing font weights
Examples
In tibique atomorum incorrupte pro, at ullum menandri consequat eos. Ad per ponderum iracundia intellegebat, bookmark this web page. Habeo corrumpit vim ut, sed sint doming ex, te nostrum apeirian efficiantur ius. Vel corpora urbanitas repudiandae an, ei eum enim equidem graecis, ut esse brute scripserit nam. Est ex augue putant, quo an tota deseruisse instructior, novum scaevola ex sit.
Qui laudem mucius putent eu
Eum ei voluptua democritum, natum affert cu pri, vim dicam accusamus dignissim eu. Et atqui facilis eum. Qui ut posse essent necessitatibus, legendos definitiones id sed, dolore consulatu nec in. Agam corpora at duo.
Ut pri eius primis, an mea atomorum accommodare
Qui quando everti no. Accusata mediocrem gloriatur pro ne, nec cibo quas in. Virtute molestie eam ad, justo omittam sea ea. Quo sale paulo virtute te, ad enim magna ipsum usu. Nec debet exerci nostrum in, user guide (PDF X.XXMB) cu mutat menandri reprimique pro. Eu est dignissim consetetur. Ne sonet postea ancillae pro.
All icons options
Edit link with no onward journey
This variant has now been deprecated and replaced by tertiary buttons. Please see buttons for more details.
Heading level 2
Proin in nunc dui. Vivamus tincidunt, augue eu egestas ultrices, tellus massa tristique lorem, eu rhoncus enim ipsum sagittis ipsum. Curabitur consequat, metus eu fermentum finibus, neque mauris dapibus massa, quis semper risus nunc sed mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse volutpat mollis eros vitae blandit.
Notes for developers
When a link needs to be more descriptive of what / where it is going, but there is a requirement to show simplified text, the additional text can be hidden visually, for example:
<a href="..." aria-label="Read more about car insurance">Read more</a>
<!-- or -->
<a href="...">Read more<span class="u-hidden--visually"> about car insurance</span></a>
Links to external websites
If a link is taking the user to an external website, ensure that it is clear that it will do so by making the title attribute descriptive of what it will do and where it will go, for example:
<a href="http://www.google.com" title="External site - www.google.com" rel="external">Google</a>
Anchors must not open in a new window, eg. target="_blank"
, unless it would disrupt a users journey such as when within a large form. Read more about opening links in new windows.
Telephone numbers
By default, iOS, Android and some other devices will interpret text as a phone number. When the user taps / clicks on these numbers, the device's call application will launch; in order for as many devices as possible to correctly recognise a phone number, the following formats should be used within the UK:
- 555 555 5555
- 55555 555 555
Read more about national conventions for writing telephone numbers.
Some devices may turn the detected telephone number into a link, so the number may change to the relevant link style, this can cause problems where large numbers are detected incorrectly as a telephone number. We recommend that automatic telephone number detection is disabled by using the following meta tag in the head of your pages and any telephone numbers are wrapped in a link/anchor tag:
<meta name="format-detection" content="telephone=no" />
When adding in a link to a telephone number ensure that the format of the number only contains "0-9", "-" and "+", no spaces or other special characters, for example:
<a href="tel:+1-555-555-5555">1-555-555-5555</a>
Specialism icons
This icon set is part of an extension to the Framework rather than a core module; include the following code in your header to attach the relevant additional stylesheets:
<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile.css" rel="stylesheet" />
<!--[if lte IE 8]>
<link media="all" href="[ CDN Folder Path ]/css/extension-agent-profile-unmq.css" rel="stylesheet" />
<![endif]-->
Notes for testers
- Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
- Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
- Ensure that when hovering over a link the style changes noticeably.
- Ensure that when a link has focus the style changes noticeably.
- Ensure that text within links is descriptive of what or where the link is going; additional descriptive text can be hidden visually from the user to help make the link understandable, especially if there area number of links such as "Find out more" on the page which go to different locations.
- Ensure that all links are device agnostic - they must not specify how a user should be interacting with a link, eg. click.
- Ensure that any instructions are fully device agnostic - they must not refer to how the user should interact with an element, eg. click, or when an element may be relocated (unless it always directly follows or precedes the instruction) no matter what device is being used.
Code Examples
In tibique atomorum incorrupte pro, at ullum menandri consequat eos. Ad per ponderum iracundia intellegebat, bookmark this web page. Habeo corrumpit vim ut, sed sint doming ex, te nostrum apeirian efficiantur ius. Vel corpora urbanitas repudiandae an, ei eum enim equidem graecis, ut esse brute scripserit nam. Est ex augue putant, quo an tota deseruisse instructior, novum scaevola ex sit.
<a href="...">...</a>
<a class="a-link-icon [ Modifier ]" href="..."><span class="a-link-icon__inner">...</span></a>
Edit link with no onward journey
This variant has now been deprecated and should now use keyline dividers and tertiary buttons. Please see keyline dividers and buttons for more details.
Heading level 2
Proin in nunc dui. Vivamus tincidunt, augue eu egestas ultrices, tellus massa tristique lorem, eu rhoncus enim ipsum sagittis ipsum. Curabitur consequat, metus eu fermentum finibus, neque mauris dapibus massa, quis semper risus nunc sed mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse volutpat mollis eros vitae blandit.
<a class="a-link-icon a-link-icon--edit a-link-icon--edit-no-onward" href="..."><span class="a-link-icon__inner">...</span></a>
Specialism links
<a class="a-link-icon a-link-icon--specialism [ Modifier ]" href="..."><span class="a-link-icon__inner">...</span></a>
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
Class | Outcome | Required | Applied to | Comments |
---|---|---|---|---|
.a-link-icon |
Base style for all links with an icon | Yes | a |
Only required when the link is to have an icon |
.a-link-icon--attachment |
Positions attachment icon to the right of the link | .a-link-icon |
||
.a-link-icon--auto-renewal |
Positions auto-renewal icon to the right of the link | .a-link-icon |
||
.a-link-icon--back |
Positions reply/back icon to the left of the link | .a-link-icon |
Deprecated |
|
.a-link-icon--bookmark |
Positions bookmark icon to the right of the link | .a-link-icon |
||
.a-link-icon--calculator |
Positions calculator icon to the right of the link | .a-link-icon |
||
.a-link-icon--call |
Positions call icon to the right of the link | .a-link-icon |
||
.a-link-icon--claim |
Positions claim icon to the right of the link | .a-link-icon |
||
.a-link-icon--delete |
Positions delete icon to the left of the link | .a-link-icon |
Deprecated |
|
.a-link-icon--document-after |
Positions document icon to the right of the link | .a-link-icon |
||
.a-link-icon--document |
Positions document icon to the left of the link | .a-link-icon |
Deprecated |
|
.a-link-icon--download-after |
Positions download icon to the right of the link | .a-link-icon |
||
.a-link-icon--download |
Positions download icon to the left of the link | .a-link-icon |
Deprecated |
|
.a-link-icon--edit-after |
Positions edit icon to the right of the link | .a-link-icon |
||
.a-link-icon--edit |
Positions edit icon to the left of the link | .a-link-icon |
Deprecated |
|
.a-link-icon--edit-no-onward |
Modifier for edit link to suppress visited state and remove initial underline |
.a-link-icon--edit .a-link-icon--edit-after
|
Deprecated Only for use where the edit link changes the page state between non-editable to editable (no onward journey) |
|
.a-link-icon--external |
Positions external link icon to the right of the link | .a-link-icon |
||
.a-link-icon--geo-location |
Positions geo-location icon to the right of the link | .a-link-icon |
||
.a-link-icon--info |
Positions information icon to the right of the link | .a-link-icon |
Deprecated |
|
.a-link-icon--information |
Positions information icon to the right of the link | .a-link-icon |
||
.a-link-icon--links |
Positions links icon to the right of the link | .a-link-icon |
||
.a-link-icon--location |
Positions location icon to the right of the link | .a-link-icon |
||
.a-link-icon--medical-professional |
Positions medical-professional icon to the right of the link | .a-link-icon |
||
.a-link-icon--message-after |
Positions message icon to the right of the link | .a-link-icon |
||
.a-link-icon--message |
Positions message icon to the left of the link | .a-link-icon |
Deprecated |
|
.a-link-icon--new-window |
Positions new-window icon to the right of the link | .a-link-icon |
||
.a-link-icon--places |
Positions places icon to the right of the link | .a-link-icon |
||
.a-link-icon--profile |
Positions profile icon to the right of the link | .a-link-icon |
||
.a-link-icon--rss |
Positions RSS icon to the right of the link | .a-link-icon |
||
.a-link-icon--secure |
Positions secure icon to the right of the link | .a-link-icon |
||
.a-link-icon--share |
Positions share icon to the right of the link | .a-link-icon |
||
.a-link-icon--upload |
Positions upload icon to the right of the link | .a-link-icon |
||
.a-link-icon--specialism |
Base style for all links with an specialism links | Yes | .a-link-icon |
|
.a-link-icon--agricultural-professionals-insurance |
Add Agricultural Professionals Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--artisan-shopkeepers-insurance |
Add Artisan Shopkeepers Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--association-organization-insurance |
Add Association Organization Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--breakdown |
Add Breakdown icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--business-insurance |
Add Business Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--company-insurance |
Add Company Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--construction-workers-insurance |
Add Construction Workers Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--critical-illness |
Add Critical Illness icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--equity-release |
Add Equity Release icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--goods-equipment-insurance |
Add Goods Equipment Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--health |
Add Health icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--health-cash-plan |
Add Health Cash Plan icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--health-professionals-insurance |
Add Health Professionals Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--home |
Add Home icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--investment-account |
Add Investment Account icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--isa |
Add ISA icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--it-professionals-insurance |
Add IT Professionals Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--legal-protection |
Add Legal Protection icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--life |
Add Life icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--motor |
Add Motor icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--motor-professional-insurance |
Add Motor Professional Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--multi-vehicle |
Add Multi Vehicle icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--office-shop-insurance |
Add Office Shop Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--payment-insurance |
Add Payment Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--pensions |
Add Pensions icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--personal-accident-insurance |
Add Personal Accident Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--pet |
Add Pet icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--public-liability-insurance |
Add Public Liability Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--public-sector-professionals-insurance |
Add Public Sector Professionals Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--retirement-income |
Add Retirement Income icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--savings-and-investment |
Add Savings and Investment icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--school-family-protection-insurance |
Add School Family Protection Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--self-employed-professionals-insurance |
Add Self-employed Professionals Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--service-providers-insurance |
Add Service Providers Insurance icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--tertiary-sector |
Add Tertiary Sector icon to the left of the text | .a-link-icon--specialism |
![]() |
|
.a-link-icon--travel |
Add Travel icon to the left of the text | .a-link-icon--specialism |
![]() |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.