Inset text

Standard

Default

Use the default inset text to differentiate a block of text from the content that surrounds it.

It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-inset-text">
  It can take up to 8 weeks to register a lasting power of attorney if there
  are no mistakes in the application.
</div>

---
import { InsetText } from "@i-dot-ai-npm/component-library-astro";
---

<InsetText>
  It can take up to 8 weeks to register a lasting power of attorney if there
  are no mistakes in the application.
</InsetText>

import { InsetText } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <InsetText>
      It can take up to 8 weeks to register a lasting power of attorney if there
      are no mistakes in the application.
    </InsetText>
  );
}

<script>
  import { InsetText } from "@i-dot-ai-npm/component-library-svelte";
</script>

<InsetText>
  It can take up to 8 weeks to register a lasting power of attorney if there
  are no mistakes in the application.
</InsetText>

import { InsetText } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <InsetText>
      It can take up to 8 weeks to register a lasting power of attorney if there
      are no mistakes in the application.
    </InsetText>
  );
}

When to use this component

Use the inset text component to differentiate a block of text from the content that surrounds it, for example:

quotes
examples
additional information about the page

When not to use this component

Some users do not notice inset text if it’s used on complex pages or near to other visually prominent elements. For this reason, avoid using inset text as a way of highlighting very important information that users need to see.

If you need to draw attention to very important content, like legal information, use the Warning text component instead.