Skip to content
Toyota Motor Europe DX Playbook

Develop

Styles

Section titled “Styles”
<a class="tng-link">Default</a>
<a class="tng-link is-neutral">Neutral</a>

Schemes

Section titled “Schemes”

Links support scheme variants for customized color and styling.

Sizes

Section titled “Sizes”

By default links will size with the font size of their content.

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

This is body text with a link in it.

Use a size modifiers to set a fixed size.

<a class="tng-link is-sm">Small</a>
<a class="tng-link is-md">Medium (default)</a>
<a class="tng-link is-lg">Large</a>

With icons

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