Skip to main content

Hint examples

  • # default

    Open this example in a new tab: button
    It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'. 
    {
  "text": "It's on your National Insurance card, benefit letter, payslip or P60.\nFor example, 'QQ 12 34 56 C'.\n"
}
    
{% from "govuk/components/hint/macro.njk" import govukHint %}

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

  • # with html

    Open this example in a new tab: button
    It's on your National Insurance card, benefit letter, payslip or P60. For example, 'QQ 12 34 56 C'. 
    {
  "html": "It's on your National Insurance card, benefit letter, payslip or <a class=\"govuk-link\" href=\"#\">P60</a>.\nFor example, 'QQ 12 34 56 C'.\n"
}
    
{% 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>.\nFor example, 'QQ 12 34 56 C'.\n"
}) }}

  • # classes

    Open this example in a new tab: button
    It's on your National Insurance card, benefit letter, payslip or P60. 
    {
  "id": "example-hint",
  "classes": "app-hint--custom-modifier",
  "text": "It's on your National Insurance card, benefit letter, payslip or P60."
}
    
{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  "id": "example-hint",
  "classes": "app-hint--custom-modifier",
  "text": "It's on your National Insurance card, benefit letter, payslip or P60."
}) }}

  • # id

    Open this example in a new tab: button
    It's on your National Insurance card, benefit letter, payslip or P60. 
    {
  "id": "my-hint",
  "text": "It's on your National Insurance card, benefit letter, payslip or P60."
}
    
{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  "id": "my-hint",
  "text": "It's on your National Insurance card, benefit letter, payslip or P60."
}) }}

  • # html as text

    Open this example in a new tab: button
    Unexpected <strong>bold text</strong> in body 
    {
  "text": "Unexpected <strong>bold text</strong> in body"
}
    
{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  "text": "Unexpected <strong>bold text</strong> in body"
}) }}

  • # attributes

    Open this example in a new tab: button
    It's on your National Insurance card, benefit letter, payslip or P60. 
    {
  "text": "It's on your National Insurance card, benefit letter, payslip or P60.",
  "attributes": {
    "data-attribute": "my data value"
  }
}
    
{% from "govuk/components/hint/macro.njk" import govukHint %}

{{ govukHint({
  "text": "It's on your National Insurance card, benefit letter, payslip or P60.",
  "attributes": {
    "data-attribute": "my data value"
  }
}) }}