Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Back link

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

Back link default

Open this example in a new tab: Back link default

Back
Code

Markup

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

Macro

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

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

Back link reverse default

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

Back
Code

Markup

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

Macro

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

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

Back link with HTML

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

Code

Markup

<button class="nhsuk-back-link" type="submit">
  What to expect at A&amp;E
</button>

Macro

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

{{ backLink({
  html: "What to expect at A&amp;E"
}) }}

Back link with HTML via call block

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

Code

Markup

<button class="nhsuk-back-link" type="submit">
  What to expect at A&amp;E
</button>

Macro

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

{% call backLink() %}
What to expect at A&amp;E
{%- endcall %}

Back link with text escaping

Open this example in a new tab: Back link with text escaping

Code

Markup

<button class="nhsuk-back-link" type="submit">
  What to expect at A&amp;E
</button>

Macro

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

{{ backLink({
  text: "What to expect at A&E"
}) }}

Back link as a button

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

Code

Markup

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

Macro

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

{{ backLink({
  text: "Back",
  type: "submit"
}) }}

Back link reverse as a button

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

Code

Markup

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

Macro

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

{{ backLink({
  text: "Back",
  type: "submit",
  variant: "reverse"
}) }}