Hint text

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

Hint text default

Open this example in a new tab: Hint text default

Do not include personal information like your name, date of birth or NHS number

Code

Markup

<div class="nhsuk-hint">
  Do not include personal information like your name, date of birth or NHS number
</div>

Macro

{% from "hint/macro.njk" import hint -%}

{{ hint({
  text: "Do not include personal information like your name, date of birth or NHS number"
}) }}

Hint text with HTML

Open this example in a new tab: Hint text with HTML

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Code

Markup

<div class="nhsuk-hint">
  This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
</div>

Macro

{% from "hint/macro.njk" import hint -%}

{{ hint({
  html: 'This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App'
}) }}

Hint text with HTML via call block

Open this example in a new tab: Hint text with HTML via call block

This is a 10 digit number (like 999 123 4567) that you can find on an NHS letter, prescription or in the NHS App

Code

Markup

<div class="nhsuk-hint">
This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
</div>

Macro

{% from "hint/macro.njk" import hint -%}

{% call hint() %}
This is a 10 digit number (like <span class="nhsuk-u-nowrap">999 123 4567</span>) that you can find on an NHS letter, prescription or in the NHS App
{%- endcall %}