Content presentation
-
Inset text
Use inset text to help users identify and understand important content on the page, even if they do not read the whole page.
<div class="nhsuk-inset-text">
<span class="nhsuk-u-visually-hidden">Information: </span>
<p>You can report any suspected side effect to the <a href="https://yellowcard.mhra.gov.uk/" title="External website">UK safety scheme</a>.</p>
</div>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name html | Type string | Required true | Description HTML content to be used within the inset text component. |
| Name classes | Type string | Required false | Description Classes to add to the inset text. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the inset text. |
{% from 'inset-text/macro.njk' import insetText %}
{{ insetText({
"HTML": "<p>You can report any suspected side effect to the <a href=\"https://yellowcard.mhra.gov.uk/\" title=\"External website\">UK safety scheme</a>.</p>"
}) }}When to use inset text
Use inset text for content that needs to stand out from the rest of the page.
When not to use inset text
Do not use inset text in transactional pages. We haven't tested it there yet.
Do not use inset text if you need to tell a user to contact their GP or get medical help. Use the pattern to help users decide when and where to get care (care cards) instead.
Some users don't notice inset text on complex pages or near to other prominent elements, so we avoid using it for very important information that users need to see. Use a warning callout instead if the information:
- is time critical
- could have a significant effect on someone's health
- addresses a common or significant misconception or mistake
How to use inset text
Don't overdo inset text. Think about whether you need it and the best place to put it.
Accessibility
People with visual disabilities may not be able to see the colour that marks out inset text. Instead they may rely on hidden labels to recognise it.
We use <span class="visually-hidden">Information: </span> to let users with screen readers know that this is different to the body text.
Research
We've tested inset text in content pages and users understood its purpose. We haven't tested inset text in transactional pages.
Get in touch to share your research findings if you've used this pattern.
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: November 2021