Links
Links are <a> tags that are used to bring the user to a different page.
Standalone links are on their own, so it is not in a <p> tag where it is wrapped around other texts.
Inline links are in a <p> tag and is within a body of text.
Font size is 16px.
| States | Standalone Can have icon Is not underlined |
Inline No icons Is always underlined |
|---|---|---|
| :enabled |   |
  |
| :hover |   |
  |
| :focus |   |
  |
| :visited |   |
  |
| :disabled |   |
  |
| :icon Same margin rules as a button |
  |
Usage
Links are used as navigational elements, that allows users to go from one place to another on the application/site.
They can standalone or be within a sentence or a paragraph.
Links should be used sparingly to prevent clutter on a page and making it difficult for users to identify their next tseps.
When to use Navigate to a different page Navigate to a different site Jump to a section on the current page they are on Link to emails, phone numbers or external site
When not to use Use a button instead if the qction requires change of data or maniplation on how something should be displayed such as change of state, triggering an action.
| Type | Use |
|---|---|
| Standalone | Used on their own without following content. Does not require underlines. |
| Inline | Used in a sentence or body text. These links should be underlined to represent a clickable link. |