• General

  • Accordion
  • Breadcrumb
  • Buttons
  • Content card
  • Content tiles
  • Details
  • Disruption indicators
  • File download
  • In-text step
  • Inset text
  • Links
  • Loader
  • Message
  • Phase indicator
  • Sign in
  • Table
  • Ticket summary message
  • Warning text

---

• Form elements

  • Checkboxes
  • Date Input
  • Dropdown
  • File upload
  • Form label
  • Number input
  • Progress indicator
  • Question
  • Radios
  • Text Input
  • Textarea

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.

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

{% 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"
    })
}}

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.

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

{% 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"
    })
}}