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

Skip to main content
  1. GOV.UK Frontend
  2. All components
  3. Inset text

Inset text

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