Skip to main content

Your privacy settings

We use cookies to help you with journey planning and relevant disruptions, remember your login and show you content you might be interested in. If you’re happy with the use of cookies by West Midlands Combined Authority and our selected partners, click ‘Accept all cookies’. Or click ‘Manage cookies’ to learn more.

Manage Cookies
Beta

This is a new service - your feedback will help us to improve it.

Components

Inset Text

Inset Text

What does it do?

  • Allows users to identify important content on the page as they scan the page.

When to use it?

  • When you have content that needs to standout from what's around it, such as a quote, example or additional information.

When not to use it?

  • In close proximity to visually prominent elements. Users don't notice it.
  • To highlight important information that is key to the transaction/service or time critical. Use Warning Text instead.

How to use it?

  • Use inset text sparingly. They're less effective if overused.
  • Users with visual disabilities may not be able to see the colour that helps it stand out. Instead, they may rely on a hidden label to recognise it. Hide Information: inside the Inset Text div so that users with screen readers understand this information is different to body text.

Example of inset text

HTML markup
<div class="wmnds-inset-text">
  Example of inset text
</div>

Nunjucks markup
{% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}

{{
    wmndsInsetText({
        id: null,
        contentText: "Inset text",
        contentHTML: "<strong>Example of inset text HTML</strong>",
        classes: null,
        label: "Inset text example"
    })
}}

Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the inset text. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. The HTML content to use within the component.
idstringId attribute to add to the inset text container.
classesstringClasses to add to the inset text container.
labelstringRequired. The label to be attached to the component for accessibility purposes.

Example Callout

What does it do?

  • Highlight a contextual example to provide help users understand the broader page content.

When to use it?

  • When a contextual example might help the user understand the information.

When not to use it?

  • When the information is simple enough for our user's to understand. Don't give an example for the sake of it.

How to use it?

  • Use a concise heading that a user can easily scan and understand.
  • Make sure the heading is relevant to both the content it's supporting and the context it is providing in the main body text.
  • Add an aria-label to the parent Example Callout div so that users with screen readers understand that the information is important.

Example Callout title
Example callout description.

HTML markup
<div class="wmnds-inset-text" aria-label="Example Callout">
  Example Callout title<br>Example callout description.
</div>

Nunjucks markup
{% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}

{{
    wmndsInsetText({
        id: null,
        contentText: "Inset text",
        contentHTML: "<strong>Example of inset text HTML</strong>",
        classes: null,
        label: "Inset text example"
    })
}}

Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the inset text. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. The HTML content to use within the component.
idstringId attribute to add to the inset text container.
classesstringClasses to add to the inset text container.
labelstringRequired. The label to be attached to the component for accessibility purposes.