Hint

Hint

Open this example in a new tab

Code

Markup

<div class="govuk-hint">
  It&#39;s on your National Insurance card, benefit letter, payslip or P60.
For example, &#39;QQ 12 34 56 C&#39;.

</div>

Macro

{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  text:
    "It's on your National Insurance card, benefit letter, payslip or P60.\n" +
    "For example, 'QQ 12 34 56 C'.\n"
}) }}

Hint with html

Open this example in a new tab

Code

Markup

<div class="govuk-hint">
  It's on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.
  For example, 'QQ 12 34 56 C'.
</div>

Macro

{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  html:
    `It's on your National Insurance card, benefit letter, payslip or <a class="govuk-link" href="#">P60</a>.\n` +
    "For example, 'QQ 12 34 56 C'.\n"
}) }}