Inset text

Inset text

Open this example in a new tab

Code

Markup

<div class="govuk-inset-text">
  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
</div>

Macro

{% 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."
}) }}

Inset text with html

Open this example in a new tab

Code

Markup

<div class="govuk-inset-text">
  <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>
  <div class="govuk-warning-text">
    <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
    <strong class="govuk-warning-text__text">
      <span class="govuk-warning-text__assistive">Warning</span>
      You can be fined up to £5,000 if you don’t register.
    </strong>
  </div>
  <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>
</div>

Macro

{% 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'
}) }}