Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Inset text

These examples are used for automated tests and may not follow service manual best practice.

Inset text default

Open this example in a new tab: Inset text default

Information:

You can report any suspected side effect using the Yellow Card safety scheme

Code

Markup

<div class="nhsuk-inset-text">
  <span class="nhsuk-u-visually-hidden">Information: </span>
  <p>You can report any suspected side effect using the Yellow Card safety scheme</p>
</div>

Macro

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

{{ insetText({
  text: "You can report any suspected side effect using the Yellow Card safety scheme"
}) }}

Inset text with HTML

Open this example in a new tab: Inset text with HTML

Information:

You can report any suspected side effect using the Yellow Card safety scheme.

Code

Markup

<div class="nhsuk-inset-text">
  <span class="nhsuk-u-visually-hidden">Information: </span>
  <p>You can report any suspected side effect using the <a href="#">Yellow Card safety scheme</a>.</p>
</div>

Macro

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

{{ insetText({
  html: '<p>You can report any suspected side effect using the <a href="#">Yellow Card safety scheme</a>.</p>'
}) }}

Inset text with HTML via call block

Open this example in a new tab: Inset text with HTML via call block

Information:

You can report any suspected side effect using the Yellow Card safety scheme.

Code

Markup

<div class="nhsuk-inset-text">
  <span class="nhsuk-u-visually-hidden">Information: </span>
<p>You can report any suspected side effect using the <a href="#">Yellow Card safety scheme</a>.</p>
</div>

Macro

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

{% call insetText() %}
<p>You can report any suspected side effect using the <a href="#">Yellow Card safety scheme</a>.</p>
{%- endcall %}