Skip to main content

Warning text examples

  • # default

    Open this example in a new tab: button
    Warning You can be fined up to £5,000 if you don’t register. 
    {
  "text": "You can be fined up to £5,000 if you don’t register.",
  "iconFallbackText": "Warning"
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "text": "You can be fined up to £5,000 if you don’t register.",
  "iconFallbackText": "Warning"
}) }}

  • # multiple lines

    Open this example in a new tab: button
    Warning If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does. 
    {
  "text": "If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does.",
  "iconFallbackText": "Warning"
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "text": "If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does.",
  "iconFallbackText": "Warning"
}) }}

  • # attributes

    Open this example in a new tab: button
    Warning You can be fined up to £5,000 if you don’t register. 
    {
  "text": "You can be fined up to £5,000 if you don’t register.",
  "attributes": {
    "id": "my-warning-text",
    "data-test": "attribute"
  }
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "text": "You can be fined up to £5,000 if you don’t register.",
  "attributes": {
    "id": "my-warning-text",
    "data-test": "attribute"
  }
}) }}

  • # classes

    Open this example in a new tab: button
    Warning Warning text 
    {
  "text": "Warning text",
  "classes": "govuk-warning-text--custom-class"
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "text": "Warning text",
  "classes": "govuk-warning-text--custom-class"
}) }}

  • # html

    Open this example in a new tab: button
    Warning Some custom warning text 
    {
  "text": "You can be fined up to £5,000 if you don’t register.",
  "html": "<span>Some custom warning text</span>"
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "text": "You can be fined up to £5,000 if you don’t register.",
  "html": "<span>Some custom warning text</span>"
}) }}

  • # html as text

    Open this example in a new tab: button
    Warning <span>Some custom warning text</span> 
    {
  "text": "<span>Some custom warning text</span>"
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "text": "<span>Some custom warning text</span>"
}) }}

  • # icon fallback text only

    Open this example in a new tab: button
    Some custom fallback text 
    {
  "iconFallbackText": "Some custom fallback text"
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "iconFallbackText": "Some custom fallback text"
}) }}

  • # no icon fallback text

    Open this example in a new tab: button
    Warning This is a warning 
    {
  "text": "This is a warning"
}
    
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  "text": "This is a warning"
}) }}