A link (or hyperlink) is text that directly takes users to another site by clicking on it. Internal links lead to another part of the same site, while external links that lead to an external site.
Color
| Element | Property | Color token |
|---|
| Link | text-color | $link-primary |
| Link: hover | text-color | $link-primary-hover |
| Icon | svg | $link-primary |
| Icon:hover | svg | $link-primary-hover |
Typography
| Element | Font-size (px/rem) | Font-weight | Typt-token |
|---|
| Small | 14 / 0.875 | Semibold / 600 | $heading-compact-02 |
| Medium | 16 / 1 | Semibold / 600 | $heading-compact-01 |
| Large | 18 / 1.125 | Semibold / 600 | $title-01 |
Structure
| Element | Property | px / rem | Spacing token |
|---|
| Icon | padding-left | 8 / 0.5 | $spacing-03 |
