• Accordion
• Breadcrumb
• Buttons
• Content card
• File Download
• Form elements
• Hub header
• Inset text
• Links
• Loader
• Page header
• Phase indicator
• Warning text

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

<a href="#" title="link title" target="_self" class="wmre-link "  >
  
  link text
  
</a>

Primary 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.

<a href="#" title="This is a call to action link" target="_self" class="wmre-btn">
  Call to action button
</a>