5.5 Direction Link View in a new window

Direction links comprise of bold text and an arrow indicating the direction.

Twig: components/direction-links/direction-links.twig

Example
Back of page Bottom of page Top of page Next page
Markup 
{% set data = data|default({
  "svgUrl":"."
}) 
%}
<div class="nsw-container">
  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text ">
      Back <span class="sr-only">of page</span>
    </span>
      <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon nsw-icon--rotate-180">
  </a>

  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text ">
      Bottom <span class="sr-only">of page</span>
    </span>
    <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon nsw-icon--rotate-90">
  </a>

  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text">
      Top <span class="sr-only">of page</span>
    </span>
    <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon nsw-icon--rotate-270">
  </a>

  <a class="nsw-direction-link" href="#">
    <span class="nsw-direction-link__text">
      Next <span class="sr-only">page</span>
    </span>
    <img src="{{data.svgUrl}}/images/arrow.svg" class="nsw-icon">
  </a>
</div>