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

Warning Text

About

What does it do?

  • Help users identify and understand warning content on the page, even if they do not read the whole page.

When to use it?

Use the warning for information that:

- is time critical - addresses a common or significant misconception of mistake - has legal consequences of an action, or lack of action, that the user might take

When not to use it?

  • If the information is not important
  • If the information has no consequence

How it works

  • Use the icon that represents the severity of the warning

Warning Text with exclamation mark icon - triangle

Lorem ipsum dolar sit...
HTML markup
<div class="wmnds-warning-text ">
  <svg class="wmnds-warning-text__icon">
    <use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
  </svg>
  Lorem <a href='#' title='lorem' target='_blank'>ipsum</a> dolar sit...
</div>
Nunjucks markup
{% from "wmnds/components/warning-text/_warning-text.njk" import wmndsWarningText %}

{{
   wmndsWarningText({
      contentText: null,
      contentHTML: "Lorem <a href='#' title='lorem' target='_blank'>ipsum</a> dolar sit...",
      classes: null,
      icon: null
    })
}}
Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the warning text component. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content will be part of warning text component.
classesstringSpecifies what class modifiers to apply to warning text component.
iconstringName of the icon, which will be used to import icon and place it on the left side of the warning text, before text. By default it uses the general-warning-triangle icon. Icon names can be found on the icons page.

Warning text with exclamation mark icon - round

Lorem ipsum dolar sit...
HTML markup
<div class="wmnds-warning-text ">
  <svg class="wmnds-warning-text__icon">
    <use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
  </svg>
  Lorem ipsum dolar sit...
</div>
Nunjucks markup
{% from "wmnds/components/warning-text/_warning-text.njk" import wmndsWarningText %}

{{
   wmndsWarningText({
      contentText: null,
      contentHTML: "Lorem <a href='#' title='lorem' target='_blank'>ipsum</a> dolar sit...",
      classes: null,
      icon: null
    })
}}
Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the warning text component. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content will be part of warning text component.
classesstringSpecifies what class modifiers to apply to warning text component.
iconstringName of the icon, which will be used to import icon and place it on the left side of the warning text, before text. By default it uses the general-warning-triangle icon. Icon names can be found on the icons page.

Warning text with info icon - round

Lorem ipsum dolar sit...
HTML markup
<div class="wmnds-warning-text ">
  <svg class="wmnds-warning-text__icon">
    <use xlink:href="#wmnds-general-info" href="#wmnds-general-info"></use>
  </svg>
  Lorem ipsum dolar sit...
</div>
Nunjucks markup
{% from "wmnds/components/warning-text/_warning-text.njk" import wmndsWarningText %}

{{
   wmndsWarningText({
      contentText: null,
      contentHTML: "Lorem <a href='#' title='lorem' target='_blank'>ipsum</a> dolar sit...",
      classes: null,
      icon: null
    })
}}
Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the warning text component. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content will be part of warning text component.
classesstringSpecifies what class modifiers to apply to warning text component.
iconstringName of the icon, which will be used to import icon and place it on the left side of the warning text, before text. By default it uses the general-warning-triangle icon. Icon names can be found on the icons page.

Warning text with success icon - round

Lorem ipsum dolar sit...
HTML markup
<div class="wmnds-warning-text ">
  <svg class="wmnds-warning-text__icon">
    <use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
  </svg>
  Lorem ipsum dolar sit...
</div>
Nunjucks markup
{% from "wmnds/components/warning-text/_warning-text.njk" import wmndsWarningText %}

{{
   wmndsWarningText({
      contentText: null,
      contentHTML: "Lorem <a href='#' title='lorem' target='_blank'>ipsum</a> dolar sit...",
      classes: null,
      icon: null
    })
}}
Nunjucks properties
NameTypeDescription
contentTextstringRequired. Specifies the content that will be part of the warning text component. If contentHTML is supplied, this is ignored.
contentHTMLstringRequired. Uses HTML to specifies what content will be part of warning text component.
classesstringSpecifies what class modifiers to apply to warning text component.
iconstringName of the icon, which will be used to import icon and place it on the left side of the warning text, before text. By default it uses the general-warning-triangle icon. Icon names can be found on the icons page.