Inset text
Use the inset text component to differentiate a block of text from the content that surrounds it.
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 are using Nunjucks, you can use the Nunjucks macro.
Get the Nunjucks macro for this example from the Camden Frontend library
Research on this component
This component is based on the insert text component from the GOV.UK Design System.
You can take part in the ‘Insert text' discussion on GOV.UK’s Design System’s GitHub and share your research.