• Accordion
• Breadcrumb
• Buttons
• Content card
• File Download
• Form elements
• Hub header
• Inset text
• Links
• Loader
• Page header
• Phase indicator
• Warning text

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="wmre-inset-text" >
    Example of inset text
</div>

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="wmre-inset-text"  aria-label="Example Callout" >
    Example Callout title<br>Example callout description.
</div>