Switch to M&T
Overview

Link

In most contexts, links will navigate the user to a new page. They can also toggle between different layouts for displaying data or bring up a contextual help message. Link text is styled specifically so it will stand out from standard text content. Use the link class only with <a> elements.

Variants

Link
In addition to the default state, links also have a hover state and a focus state. All states allow the user to recognize that they can use the link to take action.
<a href="" class="c-link">Click Here</a>
Copy

Please note that the default Link component will have a fixed font size. If you need it to inherit the parent's font size, please use the .c-link--inherit variation.

Icon Link

Text links can appear with associated icons, such as the question mark on help links or the map pin on location links. The icon is interactive and forms part of the navigation. It will have the same states as a text link. Refer to our icon library for available icons.

Icon links are available in three different sizes. Change the modifier to adjust the size of the link, i.e. c-icon-link--small, --medium, or --large.

<a href="" class="c-icon-link--small">
  <i class="icon icon--info c-icon-link__icon"></i>
  Link Text
</a>
Copy