Components menu
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.
Warning
Call 999 if you or someone else is in immediate danger, or if there is a crime in progress.
<div class="warning-text">
<i class="fa-solid fa-circle-exclamation warning-text--icon" aria-hidden="true"></i>
<strong class="visually-hidden">Warning</strong>
<div class="warning-text--text">Call 999 if you or someone else is in immediate danger, or if the crime is in progress.</div>
</div>
.warning-text {
border: 1px solid var(--scottish-teal);
border-width: 1px 0;
font-weight: 700;
padding-left: 72px;
padding-right: 16px;
position: relative;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
padding-top: calc(1.5rem + -1px);
padding-bottom: calc(1.5rem + -1px);
}
.warning-text:first-child {
margin-top: 0;
}
.warning-text--icon {
font-size: 32px;
left: 24px;
position: absolute;
}
.warning-text>:last-child {
margin-bottom: 0;
}
@media (min-width: 576px) {
.warning-text--icon {
top: 30px;
}
}
@media (min-width: 768px) {
.warning-text {
padding-right: 72px;
padding-top: calc(2rem + -1px);
padding-bottom: calc(2rem + -1px);
margin-bottom: 2rem;
}
.warning-text--icon {
top: 38px;
}
}
@media (min-width: 1200px) {
.warning-text--icon {
top: 27px;
}
}