Design System for the NIHR

Action Link

Action links are used to signpost the start of a user journey.

When to use this component

Use an action link to signpost the start of a clearly defined user journey.

When not to use this component

Do not use an action link inside a paragraph of text.
Do not use an action link to emphasise the importance of a link.
Do not use an action link in place of a button.

Example

open this example in its own window

Example Action Link

<p>
  <a class="action-link" title="Example Action Link" href="#">
    <i class="action-link-icon fa-solid fa-circle-arrow-right"></i>
    <span class="action-link-text">Example Action Link</span>
  </a>
</p>

Options to the actionLink() macro

href: string: Any hyperlink's href value.
text: string: Any hyperlink's text value.
title: string|null = null: Any hyperlink's title value. Defaults to the text.

{% from 'macros/component/action-link.html' import actionLink %}

{{ actionLink({
    'href': '#',
    'text': 'Example Action Link',
    'title': 'Example Action Link'
}) }}