Warning Text

Use warning text to warn users about something important, such as legal consequences or actions that cannot be undone.

Default Warning Text

Warning text uses a yellow background and exclamation icon to draw attention to important information.

<div class="warning-text">
  <span class="warning-text-icon" aria-hidden="true">!</span>
  <div class="warning-text-content">
    <p>You can be fined up to £5,000 if you do not register.</p>
  </div>
</div>

Multiple Paragraphs

<div class="warning-text">
  <span class="warning-text-icon" aria-hidden="true">!</span>
  <div class="warning-text-content">
    <p>You must tell us if your circumstances change.</p>
    <p>If you do not, you may have to pay back any overpayments.</p>
  </div>
</div>

When to Use

Use warning text for:

• Legal consequences of actions
• Financial penalties
• Actions that cannot be undone
• Important deadlines with consequences

Don't use warning text for:

• General information (use inset text)
• Success messages (use alerts)
• Form validation errors (use error messages)
• Tips or helpful hints

Usage Guidelines

Do

• Be specific about what the warning is
• Explain the consequence of not following the warning
• Use sparingly — too many warnings dilute their impact
• Place warnings near the relevant content or action

Don't

• Don't use for minor issues
• Don't use multiple warnings on the same page if possible
• Don't hide warnings in accordions or tabs

Accessibility

• The icon is hidden from screen readers (aria-hidden)
• The warning text content is read normally
• Consider adding "Warning:" as visually hidden text for screen readers
• Don't rely on colour alone to convey the warning

CSS Classes

/* Container */
.warning-text { }

/* Icon */
.warning-text-icon { }

/* Content */
.warning-text-content { }