Switch to Wilmington
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.

Variants

Avoid text wrapping links wherever possible. If the linked action will allow the user to change data or navigate to the next screen in a flow, use a button instead.

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


Design Environment

Link assets are available at the 16px size when used in body copy and at the 12px size when used to trigger contextual help. Choose the size that is appropriate for your layout needs.


Microcopy

Like buttons, links should use strong verbs and specific language to clearly signal what will happen next. Do not use "here" or "click here" in the link text. Keep text as short as possible to prevent wrapping. In inline text, limit the link text to only the most relevant part of the sentence - aim for 3-5 words. Links always use sentence case. Only include ending punctuation in the link if it is a standalone.