Switch to WilmingtonOverview
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.
Variants
Use the link component only with <a> elements.
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.
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.HTML
Vanilla JS
<a href="" class="c-link">Click Here</a>
Copy
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.
HTML
Vanilla JS
<a href="" class="c-icon-link--small">
<i class="icon icon--question c-icon-link__icon"></i>
Link Text
</a>
Copy