This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Hint

Hint

Open this example in a new tab: Hintoff

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: Hint with htmloff

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"
}) }}