Skip to main content
Unified Design System
Search the Design System
Ver. 3.0.0 For the older version visit v2 documentation

Warning text

When to use this component

Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take

How it works

The component should only exist in the main section.

Example

Warning: You can be fined up to €500 if you do not register.

HTML code

<div class="govcy-warning-text">
    <span class="govcy-warning-text-icon" aria-hidden="true">!</span>
    <span class="govcy-warning-text-message">
        <span class="govcy-visually-hidden">Warning:</span>
        You can be fined up to €500 if you do not register.</span>
</div>

Component text

Use the following text:

  • English: “Warning”
  • Greek: “Προσοχή”

Accessibility

Make sure:

  • to use aria-hidden="true" on the warning icon
  • to use the <span class="govcy-visually-hidden">Warning:</span> on the warning text