We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

Help us improve the Design System by taking our short survey.

Components

Warning text

Published
19 August 2020
The warning text component puts a clear notice in a page to tell users about something important. This could be an action they need to take, or something they need to know.
Open this example in a new window

Sample HTML 

<div class="ds_warning-text">
    <strong class="ds_warning-text__icon" aria-hidden="true"></strong>
    <strong class="visually-hidden">Warning</strong>
    <div class="ds_warning-text__text">Call 999 if you or someone else is in immediate danger, or if the crime is in progress.</div>
</div>

We based our warning text component on the one built by GDS. 

Find out more about the warning text component on GOV.UK’s Design System.

Live example

Website analytics

To understand user behaviour, you can track clicks on links in warning text blocks through:

  • the selected URL (also known as click URL)
  • the selected text (also known as click text)
  • a data attribute showing the interaction

The data attribute is added automatically by the Design System’s ‘tracking’ script.

Tracking attributes

Links in warning text components get a data-navigation attribute of warning-link.

<div class="ds_warning-text">
    <strong class="ds_warning-text__icon" aria-hidden="true">!</strong>
    <strong class="visually-hidden">Warning</strong>
    <div class="ds_warning-text__text">Stay safe by following the <a data-navigation="warning-link" href="#">advice of the emergency services</a> during a flood.</div>
</div>
Back to top