Skip to main content

Internal review app NHS.UK frontend

Use design system guidance and examples to build consistent, accessible NHS services for the public and staff.

Deployed automatically from main branch (opens in new tab).

Action link

These examples are used for automated tests and may not follow service manual best practice.

Action link default

Open this example in a new tab: Action link default

Find your nearest A&E
Code

Markup

<a class="nhsuk-action-link" href="#/find">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">
    Find your nearest A&amp;E
  </span>
</a>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  href: "#/find"
}) }}

Action link reverse default

Open this example in a new tab: Action link reverse default

Find your nearest A&E
Code

Markup

<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#/find">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">
    Find your nearest A&amp;E
  </span>
</a>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  href: "#/find",
  variant: "reverse"
}) }}

Action link with HTML

Open this example in a new tab: Action link with HTML

Start session
(11 cases)
Code

Markup

<a class="nhsuk-action-link" href="#/start">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">
    Start session<br>
    <span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>
  </span>
</a>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  html: 'Start session<br>\n<span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>',
  href: "#/start"
}) }}

Action link reverse with HTML

Open this example in a new tab: Action link reverse with HTML

Start session
(11 cases)
Code

Markup

<a class="nhsuk-action-link nhsuk-action-link--reverse" href="#/start">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">
    Start session<br>
    <span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>
  </span>
</a>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  html: 'Start session<br>\n<span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>',
  href: "#/start",
  variant: "reverse"
}) }}

Action link with HTML via call block

Open this example in a new tab: Action link with HTML via call block

Start session
(11 cases)
Code

Markup

<a class="nhsuk-action-link" href="#/start">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">
Start session<br>
<span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>
  </span>
</a>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{% call actionLink({
  href: "#/start"
}) %}
Start session<br>
<span class="nhsuk-u-secondary-text-colour nhsuk-u-font-weight-normal nhsuk-u-font-size-19">(11 cases)</span>
{%- endcall %}

Action link as a button

Open this example in a new tab: Action link as a button

Code

Markup

<button class="nhsuk-action-link" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">
    Find your nearest A&amp;E
  </span>
</button>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  type: "submit"
}) }}

Action link reverse as a button

Open this example in a new tab: Action link reverse as a button

Code

Markup

<button class="nhsuk-action-link nhsuk-action-link--reverse" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z"/>
  </svg>
  <span class="nhsuk-action-link__text">
    Find your nearest A&amp;E
  </span>
</button>

Macro

{% from "action-link/macro.njk" import actionLink -%}

{{ actionLink({
  text: "Find your nearest A&E",
  type: "submit",
  variant: "reverse"
}) }}