Warning text
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.
HTML
<div class="ds_warning-text">
<span class="ds_warning-text__icon" aria-hidden="true">
<svg class="ds_icon ds_icon--fill" aria-hidden="true" role="img">
<use href="/assets/images/icons/icons.stack.svg#warning"></use>
</svg>
</span>
<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
- License an air weapon (mygov.scot)
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>