Warning
You can be fined up to £5,000 if you do not register.
A component to warn the user of something important.
| Name | Type | Default | Description |
|---|
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.
You might need to rewrite the hidden, assistive, text (‘Warning’ in the example) to make it appropriate for your context.
A standard Warning text.
Warning text with custom hidden text for users of screen-readers.
<div class="govuk-warning-text">
<span
class="govuk-warning-text__icon"
aria-hidden="true"
>
!
</span>
<strong class="govuk-warning-text__text">
<span class="govuk-visually-hidden">Warning</span>
<p>
You can be fined up to £5,000 if you do not
register.
</p>
</strong>
</div>
<WarningText>
<p>
You can be fined up to £5,000 if you do not
register.
</p>
</WarningText>
<div class="govuk-warning-text">
<span
class="govuk-warning-text__icon"
aria-hidden="true"
>
!
</span>
<strong class="govuk-warning-text__text">
<span class="govuk-visually-hidden">Warning</span>
<p>
You can be fined up to £5,000 if you do not
register.
</p>
</strong>
</div>
<WarningText>
<p>
You can be fined up to £5,000 if you do not
register.
</p>
</WarningText>
<div class="govuk-warning-text">
<span
class="govuk-warning-text__icon"
aria-hidden="true"
>
!
</span>
<strong class="govuk-warning-text__text">
<span class="govuk-visually-hidden">Caution</span>
<p>Floors may be slippery when wet.</p>
</strong>
</div>
<WarningText iconFallbackText="Caution">
<p>Floors may be slippery when wet.</p>
</WarningText>