Links
About
Buttons and links are items used to perform an action on a page
It's important to know when to use a link or a button
Links should be used when a users action won’t affect the website at all, examples of these are:
- Certain call to actions
- Links to internal or external pages
What do the **link** attritubes mean?
The href attritube is used to define the link address The target attritube is used to define where to open the linked document. See below to find out more about the target attritube The title attritube is used to define additional information about the link. It's useful for your users and accessibility. Try not to duplicate your link text- this hurts usability as hard of sight users using screen readers will here the same text twice.
Target attritube values:
_blank: Will load clicked link in a new window
_self: Will load clicked link in the same frame as it was clicked in
_parent: Will load clicked link in the parent frameset
_top: Will load clicked link in the full body of the window
framename: Will load clicked link in a named frame
Default link
What does it do?
- Highlight that the word or phrase is different from other body text
When to use it?
- When the link is within text
- When the link is part of a list of links
When not to use it?
- The start of a process
- When the link is a destructive action
HTML markup
<a href="#" title="link title" target="_self" class="wmnds-link">
Button text
</a>
Nunjucks markup
{% from "wmnds/components/link/link/_link.njk" import wmndsLink %}
{{
wmndsLink({
contentText: null,
contentHTML: "<strong>homepage</strong>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
isBackLink: false,
withChevronLeft: false,
withChevronRight: false
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| isBackLink | boolean | If true, it will overwrite text and show the standard back link. Defaults to false. |
| withChevronLeft | boolean | If true, the link will display an chevron left before the text. Defaults to false. |
| withChevronRight | boolean | If true, the link will display an chevron left after the text. Defaults to false. |
Back link
What does it do?
- Help users go back to the previous page in a multi-page transaction
When to use it?
- Only use a back link on transactional services or multi-page forms.
When not to use it?
- Never use it together with breadcrumbs. Do user research to find out if users find breadcrumbs or the back link easier to use.
- Within COVID-19 services, user research found that too many links on the page distracted users.
- Do not use the back link on a content page.
How it works?
- Always place back links at the top of the page.
- Make sure the link takes users to the previous page they were on, in the state they last saw it.
- If you cannot do this you should hide the back link. For example, when JavaScript is not available.
HTML markup
<a href="#" title="link title" target="_self" class="wmnds-link">
<span>< Back</span>
</a>
Nunjucks markup
{% from "wmnds/components/link/link/_link.njk" import wmndsLink %}
{{
wmndsLink({
contentText: null,
contentHTML: "<strong>homepage</strong>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
isBackLink: false,
withChevronLeft: false,
withChevronRight: false
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| isBackLink | boolean | If true, it will overwrite text and show the standard back link. Defaults to false. |
| withChevronLeft | boolean | If true, the link will display an chevron left before the text. Defaults to false. |
| withChevronRight | boolean | If true, the link will display an chevron left after the text. Defaults to false. |
Link with chevron
What does it do?
- Directs users to a related page which contains further information.
- Allows users to navigate forwards and backwards between search results.
When to use it?
- When you want to direct users to a page with additional information.
- Only use the Previous variant for the search results page.
When not to use it?
- In body text. Use the Default link component instead.
- On transactional services or multi-page forms. You should use the Back link component for this.
How does it work?
- If used on a site-wide banner, such as the Emergency banner, then the link will need to be hidden on the page which it links to.
- The colour of the chevron icon must meet graphical object colour contrast requirements of at least 3:1.
HTML markup
<a href="#" title="link title" target="_self" class="wmnds-link wmnds-link--with-chevron">
<svg class="wmnds-link__chevron wmnds-link__chevron--left">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
Link text
</a>
<a href="#" title="link title" target="_self" class="wmnds-link wmnds-link--with-chevron">
Link text
<svg class="wmnds-link__chevron wmnds-link__chevron--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
Nunjucks markup
{% from "wmnds/components/link/link/_link.njk" import wmndsLink %}
{{
wmndsLink({
contentText: null,
contentHTML: "<strong>homepage</strong>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
isBackLink: false,
withChevronLeft: false,
withChevronRight: false
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| isBackLink | boolean | If true, it will overwrite text and show the standard back link. Defaults to false. |
| withChevronLeft | boolean | If true, the link will display an chevron left before the text. Defaults to false. |
| withChevronRight | boolean | If true, the link will display an chevron left after the text. Defaults to false. |
Call to action buttons
What does it do?
- Encourages the most desired action you want visitors to take.
- Attracts attention on the page.
When to use it?
- When you need a strong visual indicator to help user to complete their journey and do their task.
- When you need action oriented button. Think: 'Done', 'Save', 'Next', 'Submit'.
When not to use it?
- What action you want users to take is not essential in completing their task.
- When a button is a destructive action.
- When a button starts a process or journey.
HTML markup
<a href="#" title="This is a call to action link" target="_self" class="wmnds-btn">
Call to action button
</a>
<a href="#" title="This is a call to action link" target="_self" class="wmnds-btn">
Call to action icon button
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
Nunjucks markup
{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %}
{{
wmndsLinkAsButton({
type: null,
contentText: null,
contentHTML: "<em>homepage</em>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
iconRight: 'general-chevron-right',
iconLeft: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the button. As default it is null. Available types: primary, secondary, destructive, start, mode |
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| iconLeft | string | Specified the name of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page. |
| iconRight | string | Specifies the name of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page. |
Primary buttons
What does it do?
- Gives users alternative to the call to action button.
When to use it?
- When action is not as important as a call to action so it shouldn’t call as much attention.
- When a button typically indicates actions that are important but not the call to action on a page.
- Can be used in isolation or in conjunction with call to action button and secondary.
When not to use it?
- When a button is essential for continuing the user journey
- When a button is a destructive action
- When a button starts a process or journey
HTML markup
<a href="#" title="This is a primary link" target="_self" class="wmnds-btn wmnds-btn--primary">
Primary button
</a>
<a href="#" title="This is a primary link" target="_self" class="wmnds-btn wmnds-btn--primary">
Primary icon button
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
Nunjucks markup
{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %}
{{
wmndsLinkAsButton({
type: null,
contentText: null,
contentHTML: "<em>homepage</em>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
iconRight: 'general-chevron-right',
iconLeft: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the button. As default it is null. Available types: primary, secondary, destructive, start, mode |
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| iconLeft | string | Specified the name of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page. |
| iconRight | string | Specifies the name of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page. |
Secondary buttons
What does it do?
- Indicates action that is less important than call to action primary.
- When used together with call to action and primary button it creates visual hierarchy.
- Highlights an inessential action.
When to use it?
- To indicate lower priority than call to action and primary button.
- To create a clear hierarchy of priority and importance of actions.
- When a button is inessential for continuing the user journey.
When not to use it?
- When you need a strong visual indicator to help user to complete their journey and do their task.
- When a button is essential for continuing the user journey
- When a button is a destructive action
- When a button starts a process or journey
HTML markup
<a href="#" title="This is a secondary link" target="_self" class="wmnds-btn wmnds-btn--secondary">
Secondary button
</a>
<a href="#" title="This is a secondary link" target="_self" class="wmnds-btn wmnds-btn--secondary">
Secondary icon button
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
Nunjucks markup
{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %}
{{
wmndsLinkAsButton({
type: null,
contentText: null,
contentHTML: "<em>homepage</em>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
iconRight: 'general-chevron-right',
iconLeft: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the button. As default it is null. Available types: primary, secondary, destructive, start, mode |
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| iconLeft | string | Specified the name of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page. |
| iconRight | string | Specifies the name of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page. |
Destructive button as link
What does it do?
- Shows that the button's action deletes or removes something
When to use it?
- When an action is destructive
- Example: deleting a favourite route, removing a swift card, deleting an account
When not to use it?
- When a button starts a process or journey
- When a button is trying to attract the user's attention
HTML markup
<a href="#" title="This is a destructive link" target="_self" class="wmnds-btn wmnds-btn--destructive">
Destructive button
</a>
<a href="#" title="This is a destructive link" target="_self" class="wmnds-btn wmnds-btn--destructive">
Destructive icon button
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
Nunjucks markup
{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %}
{{
wmndsLinkAsButton({
type: null,
contentText: null,
contentHTML: "<em>homepage</em>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
iconRight: 'general-chevron-right',
iconLeft: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the button. As default it is null. Available types: primary, secondary, destructive, start, mode |
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| iconLeft | string | Specified the name of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page. |
| iconRight | string | Specifies the name of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page. |
Start button as link
What does it do?
- Shows that the button starts a process or journey
When to use it?
- When a button starts a process or journey
When not to use it?
- When a button is a destructive action
- When a button is trying to attract the user's attention
- When the button is inessential for continuing the user journey
HTML markup
<a href="#" title="This is a start link" target="_self" class="wmnds-btn wmnds-btn--start">
Start button
</a>
<a href="#" title="This is a start link" target="_self" class="wmnds-btn wmnds-btn--start">
Start icon button
<svg class="wmnds-btn__icon wmnds-btn__icon--right">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</a>
Nunjucks markup
{% from "wmnds/components/link/as-button/_as-button.njk" import wmndsLinkAsButton %}
{{
wmndsLinkAsButton({
type: null,
contentText: null,
contentHTML: "<em>homepage</em>",
link: '/',
linkTitle: "Go to Homepage",
linkTarget: null,
classes: null,
iconRight: 'general-chevron-right',
iconLeft: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the button. As default it is null. Available types: primary, secondary, destructive, start, mode |
| contentText | string | Required. Specifies the content that will be part of the link. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. Uses HTML to specifies what content is going to be linked. |
| link | string | Required. Specifies the URL of the page the link goes to. |
| linkTitle | string | Required. The link title attribute gives additional information about the page being linked to. |
| linkTarget | string | Specifies where to open the linked document. Defaults to _self that means it opens in the same tab. |
| classes | string | Specifies what class modifiers to apply to link component. |
| iconLeft | string | Specified the name of the left icon, which will be used to import icon and place it on the left side of the button, before text. Icon names can be found on the icons page. |
| iconRight | string | Specifies the name of the right icon, which will be used to import icon and place it on the right side of the button, after text. Icon names can be found on the icons page. |