Content presentation - Inset text

Use inset text to help users identify and understand important content on a page.

Open this default inset text example in new window
Copy default inset text code 
<div class="hse-inset-text">
  <span class="hse-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 default inset text code
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.

Nunjucks arguments for default inset text
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.
Copy default inset text code 
{% 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 default inset text code

When to use inset text

Use inset text for content that needs to stand out from the rest of the page.

Inset text calls to attention or expands on a particular point.

You might use inset text to tell users:

  • to pay extra attention to this
  • that this will speed things up for you
  • that this is important
  • to not forget to do this
  • they cannot do this - but if it’s a warning, use a warning callout instead
  • that this is a tip

When not to use inset text

Do not use inset text if you need to tell a user to:

  • contact their GP
  • get medical help

Use a care card instead.

Some users do not notice inset text on complex pages, or near to other prominent elements. So 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

Do not overuse inset text.

Think about:

  • whether you need it
  • the best place to put it

Stick to a maximum character count of 100 (including spaces). This could be roughly 14 words, depending on word length.

The text inside this component should take up no more than 3 lines on mobile view. This is about 1.5 lines on desktop.

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.

Updated: August 2023