Skip to content

CSS

Variants

Section titled “Variants”

The default variant is default. is-neutral swaps the rested colour for the surface’s neutral foreground, for links that should read as text rather than as a call to action.

<a class="tng-link is-default" href="#">Default</a>
<a class="tng-link is-neutral" href="#">Neutral</a>
Open in playground

Sizes

Section titled “Sizes”

A link has no default size — it inherits the font size of its content.

<p class="tng-text-body is-1">
  This is body text with a
  <a class="tng-link" href="#">link</a>
  in it.
</p>
Open in playground

This is body text with a link in it.

Use a size modifier to set a fixed size.

<a class="tng-link is-sm" href="#">Small</a>
<a class="tng-link is-md" href="#">Medium</a>
<a class="tng-link is-lg" href="#">Large</a>
Open in playground

With icons

Section titled “With icons”
<a class="tng-link" href="#">
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
  <span>External Link</span>
</a>
<a class="tng-link" href="#">
  <span>Continue</span>
  <i class="tng-icon icon-arrow-right" aria-hidden="true"></i>
</a>
Open in playground