Navigation - Action link

Use action links to help users get to the next stage of a journey quickly by signposting the start of a digital service. For example, when applying for a medical card or finding a GP.

Open this default action link example in new window
Copy default action link code 
<div class="hse-action-link">
  <a class="hse-action-link__link" href="https://www.hse.ie/service-search/minor-injuries-unit/locationsearch/551">
    <svg class="hse-icon hse-icon__arrow-link-right" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M3.2 16C3.2 8.944 8.944 3.2 16 3.2C23.056 3.2 28.8 8.944 28.8 16C28.8 23.056 23.056 28.8 16 28.8C8.944 28.8 3.2 23.056 3.2 16ZM-6.99382e-07 16C-3.13323e-07 24.832 7.168 32 16 32C24.832 32 32 24.832 32 16C32 7.168 24.832 -1.08544e-06 16 -6.99382e-07C7.168 -3.13323e-07 -1.08544e-06 7.168 -6.99382e-07 16ZM18.4615 14.4L8.98461 14.4C8.10096 14.4 7.38462 15.1163 7.38462 16C7.38462 16.8837 8.10096 17.6 8.98461 17.6L18.4615 17.6L18.4615 21.1929C18.4615 21.6383 19.0001 21.8614 19.3151 21.5464L24.508 16.3536C24.7032 16.1583 24.7032 15.8417 24.508 15.6464L19.3151 10.4536C19.0001 10.1386 18.4615 10.3617 18.4615 10.8071L18.4615 14.4Z" />
    </svg>

    <span class="hse-action-link__text">Find a minor injuries unit</span>
  </a>
</div>
Close default action link code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default action link
Name Type Required Description
Name text Type string Required true Description Text to use within the action link component.
Name href Type string Required true Description The value of the link href attribute.
Name openInNewWindow Type boolean Required false Description If set to true, then the link will open in a new window.
Name classes Type string Required false Description Classes to add to the anchor tag.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the anchor tag.
Copy default action link code 
{% from 'action-link/macro.njk' import actionLink %}

{{ actionLink({
  "text": "Find a minor injuries unit",
  "href": "https://www.hse.ie/service-search/minor-injuries-unit/locationsearch/551"
}) }}
Close default action link code

When to use action links

Use action links to signpost the start of a digital service.

When not to use action links

Do not use action links in forms. Use a button instead.

Do not use action links to link to:

  • another page
  • another website
  • a file, even if it’s an application form

If you need a link to stand out, you can use inset text.

Keep the words on the action link short. Start with a verb, for example: "Book an appointment" or "Apply for an EHIC card".

Words used on the action link should not go beyond one line on mobile, which is about 26 characters.

Action links usually sit in a block of text. You can also put one in a care card.

You can have more than one action link on a page but try to avoid putting them near each other.

Interactive states for an action link

There are 3 interactive states:

  • default
  • hover
  • focus

Accessibility

The action link (#0B55B7) is typically on our light grey background (#F3F3F3), creating a AAA contrast ratio of 6.33:1.

Updated: August 2023