Skip to main content

Inset text examples

  • # default

    Open this example in a new tab: button
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 
    {
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}
    
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{{ govukInsetText({
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}

  • # with html

    Open this example in a new tab: button

    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

    Warning You can be fined up to £5,000 if you don’t register.

    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

    {
  "html": "<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    You can be fined up to £5,000 if you don’t register.\n  </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n"
}
    
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{{ govukInsetText({
  "html": "<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n<div class=\"govuk-warning-text\">\n  <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n  <strong class=\"govuk-warning-text__text\">\n    <span class=\"govuk-warning-text__assistive\">Warning</span>\n    You can be fined up to £5,000 if you don’t register.\n  </strong>\n</div>\n<p class=\"govuk-body\">It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.</p>\n"
}) }}

  • # classes

    Open this example in a new tab: button
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 
    {
  "classes": "app-inset-text--custom-modifier",
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}
    
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{{ govukInsetText({
  "classes": "app-inset-text--custom-modifier",
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}

  • # id

    Open this example in a new tab: button
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 
    {
  "id": "my-inset-text",
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}
    
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{{ govukInsetText({
  "id": "my-inset-text",
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}

  • # html as text

    Open this example in a new tab: button
    It can take <b>up to 8 weeks</b> to register a lasting power of attorney if there are no mistakes in the application. 
    {
  "text": "It can take <b>up to 8 weeks</b> to register a lasting power of attorney if there are no mistakes in the application."
}
    
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{{ govukInsetText({
  "text": "It can take <b>up to 8 weeks</b> to register a lasting power of attorney if there are no mistakes in the application."
}) }}

  • # attributes

    Open this example in a new tab: button
    It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 
    {
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.",
  "attributes": {
    "data-attribute": "my data value"
  }
}
    
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}

{{ govukInsetText({
  "text": "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.",
  "attributes": {
    "data-attribute": "my data value"
  }
}) }}