Skip to content
Toyota Motor Europe

Link

Links are interactive text elements that can be used to navigate users to other pages or resources or perform actions as a button.

Schemes

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

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>

Accessibility

Section titled “Accessibility”
Section titled “Link vs button”

Links navigate to a new page or resource. Buttons perform an action. Don’t put href="#" on a link to make it act as a button — use <button> instead. Screen readers announce links and buttons differently, and users have different keyboard expectations for each.

Meaningful link text

Section titled “Meaningful link text”

Avoid generic text like “click here” or “read more”. Link text should describe the destination so it makes sense out of context (e.g. in a screen reader’s links list).

Section titled “External links”

When a link opens a new window or tab (target="_blank"):

  • Add rel="noopener" for security.
  • Indicate the behaviour to screen readers, for example <span class="sr-only">(opens in new tab)</span>.

Icons

Section titled “Icons”
  • Mark decorative icons with aria-hidden="true" (already shown in the examples above).
  • If the icon is the only content in a link, add aria-label on the <a> element to provide an accessible name.