Back link

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

Back link default

Code

<a class="nhsuk-back-link" href="#">
  Back
</a>

{% from "back-link/macro.njk" import backLink -%}

{{ backLink({
  text: "Back",
  href: "#"
}) }}

Code

<a class="nhsuk-back-link nhsuk-back-link--reverse" href="#">
  Back
</a>

{% from "back-link/macro.njk" import backLink -%}

{{ backLink({
  text: "Back",
  variant: "reverse",
  href: "#"
}) }}

Code

<a class="nhsuk-back-link" href="#">
  <span class="nhsuk-u-visually-hidden">Back to</span> Search results
</a>

{% from "back-link/macro.njk" import backLink -%}

{{ backLink({
  visuallyHiddenText: "Back to",
  text: "Search results",
  href: "#"
}) }}

Code

<button class="nhsuk-back-link">
  Back
</button>

{% from "back-link/macro.njk" import backLink -%}

{{ backLink({
  text: "Back",
  element: "button"
}) }}