# Links

> `variant='link'` — medium weight in the brand color, always underlined. Works on anchors and router links alike.

Source: https://ngwr.dev/guides/typography/links  
Kind: Directive

## Default

```angular-html
<a wrTypography variant="link" href="…">ngwr on GitHub</a>
```

## Inline in a paragraph

Inherits the surrounding font size; weight, colour and a permanent underline mark it. The underline is not decoration — brand colour alone measures 2.72:1 against body text, under the 3:1 that would let colour carry a link on its own.

```angular-html
<p wrTypography variant="body">
  … the <a wrTypography variant="link" href="…">getting started guide</a> …
</p>
```

## With icon

```angular-html
<!-- `<wr-icon>` takes no size input — it reads --wr-icon-size, which
     defaults to 1.2em, so beside link text it is already proportional.
     Override the property when you want a specific size. -->
<a wrTypography variant="link" href="…">
  Read the changelog
  <wr-icon name="arrow-forward" style="--wr-icon-size: 0.875rem" />
</a>
```