Navigation - Quick link

Use a quick link on a main topic or sub-topic hub to bring users to important or urgent links. For example, the "get urgent help" link on the mental health landing page.

Open this default quick link example in new window
Copy default quick link code 
<a class="hse-quick-link__link" href="https://www.hse.ie/">
  <span class="hse-quick-link__text">Default quick link</span>

  <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M15.5002 11.9999C15.5017 12.2657 15.3974 12.5212 15.2102 12.7099L10.2102 17.7099C9.95655 17.9636 9.58683 18.0627 9.24033 17.9698C8.89383 17.877 8.62318 17.6063 8.53033 17.2598C8.43748 16.9133 8.53655 16.5436 8.79021 16.2899L13.0902 11.9999L8.79021 7.70994C8.39809 7.31782 8.39809 6.68206 8.79021 6.28994C9.18233 5.89782 9.81809 5.89782 10.2102 6.28994L15.2102 11.2899C15.3974 11.4787 15.5017 11.7341 15.5002 11.9999Z" />
  </svg>
</a>
Close default quick 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 quick link
Name Type Required Description
Name text Type string Required true Description Text to use within the quick 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 quick link code 
{% from 'quick-link/macro.njk' import quickLink %}

{{ quickLink({
    "text": "Default quick link",
    "href": "https://www.hse.ie/" })
}}
Close default quick link code
Open this aqua quick link example in new window
Copy aqua quick link code 
<a class="hse-quick-link__link hse-quick-link__link--aqua" href="https://www.hse.ie/">
  <span class="hse-quick-link__text">Aqua quick link</span>

  <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M15.5002 11.9999C15.5017 12.2657 15.3974 12.5212 15.2102 12.7099L10.2102 17.7099C9.95655 17.9636 9.58683 18.0627 9.24033 17.9698C8.89383 17.877 8.62318 17.6063 8.53033 17.2598C8.43748 16.9133 8.53655 16.5436 8.79021 16.2899L13.0902 11.9999L8.79021 7.70994C8.39809 7.31782 8.39809 6.68206 8.79021 6.28994C9.18233 5.89782 9.81809 5.89782 10.2102 6.28994L15.2102 11.2899C15.3974 11.4787 15.5017 11.7341 15.5002 11.9999Z" />
  </svg>
</a>
Close aqua quick 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 aqua quick link
Name Type Required Description
Name text Type string Required true Description Text to use within the quick 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 aqua quick link code 
{% from 'quick-link/macro.njk' import quickLink %}

{{ quickLink({
  "text": "Aqua quick link",
  "href": "https://www.hse.ie/",
  "classes": "hse-quick-link__link--aqua" 
  })
}}
Close aqua quick link code
Open this purple quick link example in new window
Copy purple quick link code 
<a class="hse-quick-link__link hse-quick-link__link--purple" href="https://www.hse.ie/">
  <span class="hse-quick-link__text">Purple quick link</span>

  <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M15.5002 11.9999C15.5017 12.2657 15.3974 12.5212 15.2102 12.7099L10.2102 17.7099C9.95655 17.9636 9.58683 18.0627 9.24033 17.9698C8.89383 17.877 8.62318 17.6063 8.53033 17.2598C8.43748 16.9133 8.53655 16.5436 8.79021 16.2899L13.0902 11.9999L8.79021 7.70994C8.39809 7.31782 8.39809 6.68206 8.79021 6.28994C9.18233 5.89782 9.81809 5.89782 10.2102 6.28994L15.2102 11.2899C15.3974 11.4787 15.5017 11.7341 15.5002 11.9999Z" />
  </svg>
</a>
Close purple quick 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 purple quick link
Name Type Required Description
Name text Type string Required true Description Text to use within the quick 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 purple quick link code 
{% from 'quick-link/macro.njk' import quickLink %}

{{ quickLink({
  "text": "Purple quick link",
  "href": "https://www.hse.ie/",
  "classes": "hse-quick-link__link--purple" 
  })
}}
Close purple quick link code

When to use a quick link

Use a quick link to help users find priority links or tools without needing to explore the page content.

The quick links should be the first row of links on the page.

Do not use more than 3 quick links on any page.

When not to use a quick link

Quick links should only be used for priority user content.

Quick links are only used on the:

  • main topic page
  • sub-topic landing pages

Updated: October 2023