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.

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 reverse default

Open this example in a new tab: Hint text reverse default

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

Markup

<div class="nhsuk-hint nhsuk-hint--reverse">
  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",
  variant: "reverse"
}) }}