Components menu
Flood warning
Flood warning
10
Flood Alerts
10
Flood Warnings
10
Severe Flood Warnings
Last Warning issued: 12 April 2023 at 09:37
Live flood information
10
Flood Alerts
10
Flood Warnings
10
Severe Flood Warnings
Last Warning issued: 12 April 2023 at 09:37
HTML
<div class="spacer--large"></div>
<div class="container-fluid grey--bg">
<div class="container">
<div class="row">
<div class="d-none d-lg-block">
<h2>Flood warning</h2>
<div class="spacer--small"></div>
<div class="row">
<div class="col">
<div class="flood--card-alert card">
<div class="row">
<div class="col-4 flood--image"> <img src="images/flood-warnings/flood-warnings-alert.gif" class="img-fluid" alt=""> </div> <!-- // image -->
<div class="col-8 flood--card-content card-body">
<div class="col-3 float-start flood--card-number"> 10 </div>
<h3 class="col-9 float-end alert--card-title"> Flood Alerts </h3>
</div> <!-- // card-body -->
</div> <!-- // row -->
</div> <!-- // flood--card - Alert -->
</div>
<div class="col">
<div class="flood--card-warning card">
<div class="row">
<div class="col-4 flood--image"> <img src="images/flood-warnings/flood-warnings-warning.gif" class="img-fluid" alt=""> </div> <!-- // image -->
<div class="col-8 flood--card-content card-body">
<div class="col-3 float-start flood--card-number"> 10 </div>
<h3 class="col-9 float-end alert--card-title"> Flood Warnings </h3>
</div> <!-- // card-body -->
</div> <!-- // row -->
</div> <!-- // flood--card - Warning -->
</div>
<div class="col">
<div class="flood--card-severe card">
<div class="row">
<div class="col-4 flood--image"> <img src="images/flood-warnings/flood-warnings-severe.gif" class="img-fluid" alt=""> </div> <!-- // image -->
<div class="col-8 flood--card-content card-body">
<div class="col-3 float-start flood--card-number"> 10 </div>
<h3 class="col-9 float-end alert--card-title"> Severe Flood Warnings </h3>
</div> <!-- // card-body -->
</div> <!-- // row -->
</div> <!-- // flood--card - Severe -->
</div>
</div> <!-- // row -->
<p>Last Warning issued: 12 April 2023 at 09:37 </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-xxl-9 col-lg-9 col-md-9 col-sm-8 col-12 float-start">
<h2>Flood warning</h2>
</div>
<div class="col-xxl-3 col-lg-3 col-md-3 col-sm-4 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 alerts <i class="card-link-icon fa-solid fa-circle-chevron-down"></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-xxl-4 col-lg-4 col-md-6 col-sm-7 col-6 flood--image"> <img src="images/flood-warnings/flood-warnings-alert.gif" class="img-fluid" alt=""> </div> <!-- // image -->
<div class="col-xxl-8 col-lg-8 col-md-6 col-sm-5 col-6 flood--card-content card-body">
<div class="col-xxl-3 col-lg-3 col-md-12 col-sm-12 float-start flood--card-number"> 10 </div>
</div>
<div class="col-xxl-8 col-lg-8 col-md-12 col-sm-12 col-12 flood--card-content card-body">
<h3 class="col-xxl-9 col-lg-9 col-md-12 col-sm-12 alert--card-title"> Flood Alerts </h3>
</div> <!-- // flood--card-content -->
</div> <!-- // row -->
</div> <!-- // flood--card - Alert -->
</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-xxl-4 col-lg-4 col-md-6 col-sm-7 col-6 flood--image"> <img src="images/flood-warnings/flood-warnings-warning.gif" class="img-fluid" alt=""> </div> <!-- // image -->
<div class="col-xxl-8 col-lg-8 col-md-6 col-sm-5 col-6 flood--card-content card-body">
<div class="col-xxl-3 col-lg-3 col-md-12 col-sm-12 float-start flood--card-number"> 10 </div>
</div>
<div class="col-xxl-8 col-lg-8 col-md-12 col-sm-12 col-12 flood--card-content card-body">
<h3 class="col-xxl-9 col-lg-9 col-md-12 col-sm-12 alert--card-title"> Flood Warnings </h3>
</div> <!-- // flood--card-content -->
</div> <!-- // row -->
</div> <!-- // flood--card - Warning -->
</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-xxl-4 col-lg-4 col-md-6 col-sm-7 col-6 flood--image"> <img src="images/flood-warnings/flood-warnings-severe.gif" class="img-fluid" alt=""> </div> <!-- // image -->
<div class="col-xxl-8 col-lg-8 col-md-6 col-sm-5 col-6 flood--card-content card-body">
<div class="col-xxl-3 col-lg-3 col-md-12 col-sm-12 float-start flood--card-number"> 10 </div>
</div>
<div class="col-xxl-8 col-lg-8 col-md-12 col-sm-12 col-12 flood--card-content card-body">
<h3 class="col-xxl-9 col-lg-9 col-md-12 col-sm-12 alert--card-title"> Severe Flood Alerts </h3>
</div> <!-- // flood--card-content -->
</div> <!-- // row -->
</div> <!-- // flood--card - Severe -->
</div>
</div> <!-- // row -->
<p>Last Warning issued: 12 April 2023 at 09:37 </p>
</div> <!-- // collapse -->
</div>
</div> <!-- // flood--warning-collapse-card -->
<!-- // Mobile view - Collapse component -->
</div> <!-- // row -->
</div> <!-- // container -->
</div> <!-- // grey--bg -->
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--image {
padding: 20px;
}
.flood--card-content {
padding: 25px 15px 0 0;
}
/* Responsive styling
------------------------------------ */
@media (min-width: 320px) {
/* Flood warning */
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 170px;
}
.flood--warning-collapse-card {
background: #fff;
padding: 20px;
}
.flood--warning-collapse-card h2 {
padding-top: 8px;
}
.flood--card-content {
padding: 10px 25px 0 0;
}
.flood--card-number {
font-size: 5rem;
text-align: center;
}
.flood--card-content h3 {
font-size: 1.2rem;
line-height: 1.5rem;
text-align: center;
}
.alert--card-title, .warning--card-title, .severe--card-title {
padding-top: 0px;
padding-left: 23px;
margin-top: -15px;
}
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
/* Flood warning */
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 170px;
}
.flood--warning-collapse-card {
background: #fff;
padding: 20px;
}
.flood--warning-collapse-card h2 {
padding-top: 8px;
}
.flood--card-content {
padding: 5px 20px 0 0;
}
.flood--card-number {
font-size: 3rem;
}
.flood--card-content h3 {
font-size: 1.3rem;
line-height: 1.5rem;
}
.alert--card-title, .warning--card-title, .severe--card-title {
padding-top: 0px;
padding-left: 23px;
margin-top: -15px;
}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
/* Flood warning */
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 170px;
}
.flood--warning-collapse-card {
background: #fff;
padding: 20px;
}
.flood--warning-collapse-card h2 {
padding-top: 8px;
}
.flood--card-content {
padding: 10px 25px 0 0;
}
.flood--card-number {
font-size: 4rem;
}
.flood--card-content h3 {
font-size: 1.3rem;
line-height: 1.5rem;
}
.alert--card-title, .warning--card-title, .severe--card-title {
padding-top: 0px;
padding-left: 23px;
margin-top: -15px;
}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* Flood warning */
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 100px;
}
.flood--card-content {
padding: 15px 25px 0 0;
}
.flood--card-number {
font-size: 2.8rem;
}
.flood--card-content h3 {
font-size: 1.25rem;
line-height: 1.5rem;
text-align: left;
}
.alert--card-title {
padding-top: 20px;
padding-left: 5px;
margin-top: 0;
}
.warning--card-title, .severe--card-title {
padding-top: 10px;
padding-left: 5px;
margin-top: 0;
}
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
/* Flood warning */
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 120px;
}
.flood--card-content {
padding: 15px 15px 0 0;
}
.flood--card-number {
font-size: 3.7rem;
}
.flood--card-content h3 {
font-size: 1.3rem;
}
.alert--card-title {
padding-top: 30px;
padding-left: 10px;
}
.warning--card-title, .severe--card-title {
padding-top: 19px;
padding-left: 10px;
}
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
/* Flood warning */
.flood--card-alert, .flood--card-warning, .flood--card-severe {
min-height: 140px;
}
.flood--card-content {
padding: 15px 25px 0 0;
}
.flood--card-number {
font-size: 4rem;
}
.flood--card-content h3 {
font-size: 1.5rem;
}
.alert--card-title {
padding-top: 34px;
padding-left: 10px;
}
.warning--card-title, .severe--card-title {
padding-top: 22px;
padding-left: 10px;
}
}