Structure
Subtle link
Bold link
Bold link with icon
Sizes & Typography
There are five size variants for the link component: extra small, small, medium, large, and extra large. It is recommended that the link size matches the type size of the text it is inline with. Link sizes should match the page's default body copy size if they are used apart from other content.
Sizes
| Property | Family | Size | rem | px |
|---|---|---|---|---|
| Link xs | $body | $xs | 0.75 | 12 |
| Link sm | $body | $sm | 0.875 | 14 |
| Link md | $body | $md | 1 | 16 |
| Link lg | $body | $lg | 1.3125 | 21 |
| Link xl | $body | $xl | 1.75 | 28 |
Variants & colour
Variants
| Property | Token | Hex |
|---|---|---|
| Link default | $blue800 | #0f67f5 |
| Link hover | $blue900 | #194ac8 |
| Link pressed | $blue1000 | #102da2 |
| Link focus | $blue1000 | #102da2 |
| Link disabled | $blue800, opacity 30% | #0f67f5 |