Back link examples

• # default

  Open this example in a new tab

  {}

  
  {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
  
  {{ govukBackLink({}) }}
          

• # inverse

  Open this example in a new tab

  {
    "classes": "govuk-back-link--inverse"
  }

  
  {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
  
  {{ govukBackLink({
    "classes": "govuk-back-link--inverse"
  }) }}
          

• # classes

  Open this example in a new tab

  {
    "classes": "app-back-link--custom-class"
  }

  
  {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
  
  {{ govukBackLink({
    "classes": "app-back-link--custom-class"
  }) }}
          

• # html as text

  Open this example in a new tab

  {
    "text": "<b>Home</b>"
  }

  
  {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
  
  {{ govukBackLink({
    "text": "<b>Home</b>"
  }) }}
          

• # html

  Open this example in a new tab

  {
    "html": "<b>Back</b>"
  }

  
  {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
  
  {{ govukBackLink({
    "html": "<b>Back</b>"
  }) }}
          

• # with custom text and link

  Open this example in a new tab

  {
    "href": "/home",
    "text": "Back to home"
  }

  
  {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
  
  {{ govukBackLink({
    "href": "/home",
    "text": "Back to home"
  }) }}
          

• # attributes

  Open this example in a new tab

  {
    "attributes": {
      "data-test": "attribute",
      "aria-label": "Back to home"
    }
  }

  
  {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
  
  {{ govukBackLink({
    "attributes": {
      "data-test": "attribute",
      "aria-label": "Back to home"
    }
  }) }}