Inset text
<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>See options and how to use with Nunjucks
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
{% call govukInsetText() %}
It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
{% endcall %}When to use this component
Use the inset text component to differentiate a block of text from the content that surrounds it, for example:
- quotes
- examples
- additional information about the page
When not to use this component
Some users do not notice inset text if it’s used on complex pages or near to other visually prominent elements. For this reason, avoid using inset text as a way of highlighting very important information that users need to see.
If you need to draw attention to very important content, like legal information, use the Warning text component instead.
How it works
Use inset text very sparingly - it’s less effective if it’s overused.
There are 2 ways to use the inset text component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<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>See options and how to use with Nunjucks
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
{% call govukInsetText() %}
It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
{% endcall %}Recent changes
| Date | Changed | Description |
|---|---|---|
| Aug 2022 | GOV.UK Frontend v4.3.0 | Added the ability to pass the |
| Mar 2019 | GOV.UK Frontend v2.8.0 | Fixed nested components within Inset text being misaligned. |
| Jun 2018 | GOV.UK Frontend v1.0.0 | Component introduced. |
Help improve this component
To help make sure that this page is useful, relevant and up to date, you can:
- take part in the ‘Inset text’ discussion on GitHub and share your research
- propose a change on GitHub – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.