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.

Open this inset text example in new window
Copy
<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>
Close
Copy
{% 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>"
}) }}
Close

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 a care card 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.

Have you tested this component?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: January 2019