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

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

<div class="wmre-warning-text ">
    <svg class="wmre-warning-text__icon">
      <use xlink:href="#wmre-general-warning-triangle" href="#wmre-general-warning-triangle"></use>
    </svg>
    Warning! Type something.
</div>

Warning text with exclamation mark icon - round

<div class="wmre-warning-text ">
    <svg class="wmre-warning-text__icon">
      <use xlink:href="#wmre-general-warning-circle" href="#wmre-general-warning-circle"></use>
    </svg>
    Warning! Type something.
</div>

Warning text with info icon - round

<div class="wmre-warning-text ">
    <svg class="wmre-warning-text__icon">
      <use xlink:href="#wmre-general-info" href="#wmre-general-info"></use>
    </svg>
    Warning! Type something.
</div>

Warning text with success icon - round

<div class="wmre-warning-text ">
    <svg class="wmre-warning-text__icon">
      <use xlink:href="#wmre-general-success" href="#wmre-general-success"></use>
    </svg>
    Type something.
</div>