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
Service Notice
This is a test message. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
HTML
<div class="warning-text">
<span class="warning-text--icon">
<i class="fa-solid fa-circle-exclamation fa-1x" aria-hidden="true"></i>
</span>
<div class="visually-hidden">Warning</div>
<strong class="warning-text--text">Warning</strong>
<p class="warning-text--text">Call 999 if you or someone else is in immediate danger, or if the crime is in progress.</p>
</div>
CSS
/* Warning text
------------------------------------ */
.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;
}
}