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 example in new window

HTML

Copy code

<div class="hs2-inset-text">
  <span class="hs2-u-visually-hidden">Information: </span>
  <p>Put your important content here</p>
</div>

Nunjucks

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 code

{% from 'inset-text/macro.njk' import insetText %}

{{ insetText({
  "HTML": "<p>Put your important content here</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.

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.