Patterns menu
Flood warning
The flood warning pattern is used to provide users with the latest flood alerts and warnings.
About this pattern
The flood warning displays the latest alerts and/or warnings in place along with a date and time so that users have a visible way off seeing the live information. The user also has the option to click through to the dedictated floodline page by selecting one of the alert boxes.
The component is displayed as a collapsable box when displayed on devices smaller than 768px
HTML
<div class="container-fluid grey--bg landing--page-alert-box">
<div class="container">
<div class="row">
<div class="d-none d-lg-block">
<h2>Live flood information</h2>
<div class="spacer--small"></div>
<div class="row">
<div class="col">
<div class="flood--card-alert card">
<div class="row">
<div class="col-xxl-4 col-lg-4 col-md-4 col-sm-4 col-12 flood--card-image">
<img src="/images/flood-warnings/flood-warnings-alert.gif" class="img-fluid" alt="">
</div>
<div class="col-xxl-8 col-lg-8 col-md-8 col-sm-8 col-12 flood--card-content">
<div class="col-3 float-start flood--card-number">0</div>
<h3 class="col-9 float-end alert--card-title">
<a href="/flooding/live-flooding-information/" title="View live flood alerts" aria-label="View live flood alerts">Flood alerts</a>
</h3>
</div>
</div>
</div>
</div>
<div class="col">
<div class="flood--card-warning card">
<div class="row">
<div class="col-xxl-4 col-lg-4 col-md-4 col-sm-4 col-12 flood--card-image">
<img src="/images/flood-warnings/flood-warnings-warning.gif" class="img-fluid" alt="">
</div>
<div class="col-xxl-8 col-lg-8 col-md-8 col-sm-8 col-12 flood--card-content">
<div class="col-3 float-start flood--card-number">0</div>
<h3 class="col-9 float-end warning--card-title">
<a href="/flooding/live-flooding-information/" title="View live flood warnings" aria-label="View live flood warnings">Flood warnings</a>
</h3>
</div>
</div>
</div>
</div>
<div class="col">
<div class="flood--card-severe card">
<div class="row">
<div class="col-xxl-4 col-lg-4 col-md-4 col-sm-4 col-12 flood--card-image">
<img src="/images/flood-warnings/flood-warnings-severe.gif" class="img-fluid" alt="">
</div>
<div class="col-xxl-8 col-lg-8 col-md-8 col-sm-8 col-12 flood--card-content">
<div class="col-3 float-start flood--card-number">0</div>
<h3 class="col-9 float-end severe--card-title">
<a href="/flooding/live-flooding-information/" title="View live severe flood warnings" aria-label="View live severe flood warnings">Severe flood warnings</a>
</h3>
</div>
</div>
</div>
</div>
</div>
<div class="spacer--small"></div>
<p>Last update: 18 September 2024 at 10:40</p>
</div> <!-- // Desktop view -->
<div class="d-lg-none">
<div class="card--verdant-green flood--warning-collapse-card col-12 float-start">
<div class="col-md-8 col-sm-7 col-12 float-start">
<h2>Live flood information</h2>
</div>
<div class="col-md-4 col-sm-5 col-12 float-end">
<a class="card-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-floodwarnings" aria-expanded="false" aria-controls="collapse-floodwarnings">
View warnings <i class="card-link-icon fa-solid fa-circle-chevron-down" aria-hidden="true"></i>
</a>
</div>
<div class="collapse col-12 float-start" id="collapse-floodwarnings">
<div class="row">
<div class="spacer--large"></div>
<div class="col-xxl-4 col-lg-4 col-md-4 col-sm-4 col-12">
<div class="flood--card-alert card">
<div class="row">
<div class="col-12 flood--card-image">
<img class="img-fluid" src="/images/flood-warnings/flood-warnings-alert.gif" alt="">
</div>
<div class="col-12 flood--card-content">
<div class="flood--collapse-number">0</div>
<h3 class="alert--collapse-title">
<a href="/flooding/live-flooding-information/" title="View live flood alerts" aria-label="View live flood alerts">Flood alerts</a>
</h3>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-lg-4 col-md-4 col-sm-4 col-12">
<div class="flood--card-warning card">
<div class="row">
<div class="col-12 flood--card-image">
<img class="img-fluid" src="/images/flood-warnings/flood-warnings-warning.gif" alt="">
</div>
<div class="col-12 flood--card-content">
<div class="flood--collapse-number">0</div>
<h3 class="warning--collapse-title">
<a href="/flooding/live-flooding-information/" title="View live flood warnings" aria-label="View live flood warnings">Flood warnings</a>
</h3>
</div>
</div>
</div>
</div>
<div class="col-xxl-4 col-lg-4 col-md-4 col-sm-4 col-12">
<div class="flood--card-severe card">
<div class="row">
<div class="col-12 flood--card-image">
<img class="img-fluid" src="/images/flood-warnings/flood-warnings-severe.gif" alt="">
</div>
<div class="col-12 flood--card-content">
<div class="flood--collapse-number">0</div>
<h3 class="warning--collapse-title">
<a href="/flooding/live-flooding-information/" title="View live severe flood warnings" aria-label="View live severe flood warnings">Severe flood warnings</a>
</h3>
</div>
</div>
</div>
</div>
</div>
<div class="spacer--small"></div>
<p>Last update: 18 September 2024 at 10:40</p>
</div> <!-- // Mobile view -->
</div>
</div>
</div>
</div>
</div>
<div class="spacer--small"></div>
CSS
/* Flood warning
------------------------------------ */
.flood--card-alert {
padding: 0;
border-left: 8px solid #f18700; /* Orange */
}
.flood--card-warning, .flood--card-severe {
padding: 0;
border-left: 8px solid #e3000f; /* Red */
}
.flood--warning-collapse-card {
background: #ffffff;
padding: 10px 10px 10px 20px;
}
.flood--warning-collapse-card h2 {
margin-bottom: 0;
}
.flood--warning-collapse-card a {
margin-top: 10px;
}
.flood--card-image {
margin: auto;
}
.flood--card-content {
padding-left: 0;
margin: auto;
}
.alert--card-title a, .warning--card-title a, .severe--card-title a {
text-decoration: none;
border: none;
}
@media (min-width: 320px) {
#collapse-floodwarnings {
margin-top: 15px;
}
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 190px;
}
.flood--card-image {
padding: 10px 100px;
}
.flood--card-content {
padding: 0px 20px;
}
.flood--collapse-number {
font-size: 3rem;
text-align: center;
margin-top: -15px;
}
h3.alert--collapse-title {
margin-top: -15px;
text-align: center;
font-size: 1.2rem;
}
h3.warning--collapse-title {
margin-top: -15px;
text-align: center;
font-size: 1.2rem;
}
.alert--collapse-title a, .warning--collapse-title a {
text-decoration: none;
}
.flood--warning-collapse-card a {
margin-top: 10px;
border-bottom: none;
}
}
@media (min-width: 576px) {
#collapse-floodwarnings {
margin-top: 0px;
}
.flood--card-image {
padding: 10px 30px;
}
.flood--card-content {
padding: 0px 20px;
}
.flood--collapse-number {
font-size: 3rem;
text-align: center;
margin-top: -15px;
}
h3.alert--collapse-title {
margin-top: -15px;
text-align: center;
font-size: 1.2rem;
padding: 0 10px;
}
h3.warning--collapse-title {
margin-top: -15px;
text-align: center;
font-size: 1.2rem;
}
.flood--warning-collapse-card a {
margin-top: 10px;
border-bottom: none;
}
}
@media (min-width: 768px) {
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 280px;
}
.flood--card-image {
padding: 10px 60px;
}
.flood--card-content {
padding: 0px 20px;
}
.flood--collapse-number {
font-size: 4rem;
text-align: center;
margin-top: -15px;
}
h3.alert--collapse-title, h3.warning--collapse-title {
margin-top: -15px;
text-align: center;
font-size: 1.5rem;
line-height: 1.5;
}
.flood--warning-collapse-card a {
margin-top: 10px;
border-bottom: none;
}
}
@media (min-width: 992px) {
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 110px;
}
.flood--card-image {
padding: 10px 0px 10px 20px;
}
.flood--card-content {
padding: 0 20px 0 0;
}
.flood--card-number {
font-size: 2.3rem;
text-align: center;
}
.alert--card-title {
padding-top: 13px;
padding-left: 5px;
}
.warning--card-title, .severe--card-title {
padding-top: 9px;
padding-left: 5px;
}
h3.alert--card-title, h3.warning--card-title, h3.severe--card-title {
font-size: 1.3rem;
}
}
@media (min-width: 1200px) {
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 125px;
}
.flood--card-content {
padding: 0 20px 0 0;
}
.flood--card-number {
font-size: 2.8rem;
text-align: center;
}
.alert--card-title {
padding-top: 19px;
padding-left: 5px;
}
.warning--card-title, .severe--card-title {
padding-top: 11px;
padding-left: 5px;
}
h3.alert--card-title, h3.warning--card-title, h3.severe--card-title {
font-size: 1.5rem;
}
}
@media (min-width: 1400px) {
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 150px;
}
.alert--card-title, .warning--card-title {
padding-top: 18px;
padding-left: 5px;
}
.severe--card-title {
padding-top: 10px;
padding-left: 10px;
}
}