Navigation - Page link
Use page links on main pages and sub-topic hub pages to help users find content within a topic. Page links are also known as "promos".
<div class="hse-promo">
<a class="hse-promo__link-wrapper" href="https://www.hse.ie/">
<div class="hse-promo__content">
<h3 class="hse-promo__heading">Access your GP record</h3>
<div class="hse-promo__description-wrapper">
<p class="hse-promo__description">Please register today. Donating blood is easy, and saves lives.</p>
<svg class="hse-icon hse-icon__arrow-link-right" width="12" height="22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.68097 11L1.20244 18.3333C0.606108 19.0084 0.60611 20.1028 1.20244 20.7778C1.79877 21.4528 2.76562 21.4528 3.36195 20.7778L11.3379 11.7494C11.7036 11.3355 11.7036 10.6645 11.3379 10.2506L3.36195 1.22223C2.76562 0.547217 1.79877 0.547216 1.20244 1.22223C0.60611 1.89724 0.60611 2.99166 1.20244 3.66667L7.68097 11Z" fill="#0048A8" />
</svg>
</div>
</div>
</a>
</div>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.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description Text to use within the page 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. |
{% from 'promo/macro.njk' import promo %}
{{ promo({
"heading": "Access your GP record",
"headingLevel": 3,
"description": "Please register today. Donating blood is easy, and saves lives.",
"href": "https://www.hse.ie/" })
}}Page links have a title and some microcopy. They are housed in a clickable card.
We have 2 types of page links:
- Primary page links
- Secondary page links
When to use a page link
Page links are used on main topic pages and sub-topic hub pages. Primary page links should only be used on main topic hub pages.
How to use a page link
Primary page links
Primary page links should be used on main topic hub pages.
Primary page links should be in:
- 2 columns on desktop screens
- 1 column on mobile devices
Secondary page links
Secondary page links can be used on main and sub topic hub pages.
Secondary page links should be in
- 3 columns on desktop screens
- 1 column on mobile devices
Updated: October 2023