Components menu
Cards
Cards are a flexible and extensible content container. They can include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Card layouts
HTML
<div class="row">
<div class="col-xxl-6 col-lg-6 col-md-6 col-sm-12 navigation--card">
<div class="card card--verdant-green h-100">
<div class="card-body">
<h2 class="card-title"> Card title </h2> <!-- // card-title -->
<h3 class="card-subtitle"> Card subtitle </h3> <!-- // card-subtitle -->
<div class="card-text">
<p> Card message goes here over a maximum of three lines. </p>
</div> <!-- // card-text -->
</div> <!-- // card-body -->
<div class="card-footer">
<a href="" class="card-link" title="View card information" aria-label="View card information"> View card information <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</div> <!-- // card-footer -->
</div> <!-- // card -->
</div> <!-- // column-6 (50%) -->
<div class="col-xxl-6 col-lg-6 col-md-6 col-sm-12 navigation--card">
<div class="card card--yellow h-100">
<div class="card-body">
<h2 class="card-title"> Card title </h2> <!-- // card-title -->
<h3 class="card-subtitle"> Card subtitle </h3> <!-- // card-subtitle -->
<div class="card-text">
<p> Card message goes here over a maximum of three lines. </p>
</div> <!-- // card-text -->
</div> <!-- // card-body -->
<div class="card-footer">
<a href="" class="card-link--floodline" title="View card information" aria-label="View card information"> View card information <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</div> <!-- // card-footer -->
</div> <!-- // card -->
</div> <!-- // column-6 (50%) -->
</div> <!-- // row -->
Icongraphy - 100% width (teal background)
Title
Banner related text description would be displayed here. Character count max is 260. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do.
Visit call to action
HTML
<div class="col-xxl-12 col-lg-12 col-md-12 col-sm-12">
<div class="card banner--home-tealBg">
<div class="row g-0">
<div class="col-xxl-8 col-lg-6 col-md-12 col-sm-12">
<div class="card-body">
<h2 class="card-title"> Card title </h2> <!-- // card-title -->
<div class="card-text">
<p> Card message goes here over a maximum of two lines. </p>
<a href="" class="card-link--tealBg" title="Visit card link" araia-label="Visit card link"> Card link <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</div> <!-- // card-text -->
</div> <!-- // card-body -->
</div> <!-- // card content -->
<div class="col-xxl-4 col-lg-6 col-md-12 col-sm-12 banner--home-image">
<img src="images/image-name.jpg" class="img-fluid" alt="">
<div class="banner--home-image-icon">
<img src="images/icons/icon-name.svg" class="img-fluid" alt="">
</div>
</div> <!-- // card image -->
</div> <!-- // row -->
</div> <!-- // card -->
</div> <!-- // column-12 (100%) -->
CSS
/* Cards
------------------------------------ */
.card {
border: 1px solid var(--grey-three);
border-radius: 0;
}
.full-width--card {
margin-bottom: 20px;
}
.card-footer {
color: inherit;
background-color: #ffffff;
border-top: none;
padding-bottom: 30px;
}
.card-footer-teal {
background-color: var(--scottish-teal);
}
.card-body-full {
margin-bottom: 20px;
}
.content--cards .card {
border: 0;
}
.content--cards .card-body {
padding: 20px 0 0 0;
}
.content--cards p {
font-size: 1.1rem;
font-weight: 500;
}
@media (min-width: 320px) {
.card-title { margin-bottom: 0; }
.card-subtitle { margin-bottom: 0; }
}
@media (min-width: 768px) {
.card-title { margin-bottom: 10px; }
.card-subtitle { margin-bottom: 10px; }
}
a.card-link, a.card-link--floodline {
color: var(--grey-one);
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
font-weight: 500;
padding: 0;
}
a.card-link--tealBg {
color: #ffffff;
border-bottom: 2px solid #ffffff;
text-decoration: none;
font-weight: 500;
}
a.card-link:hover, a.card-link--floodline:hover, a.card-link--tealBg:hover {
background-color: var(--grey-three);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
a.card-link:focus, a.card-link--tealBg:focus {
background-color: var(--verdant-green);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
a.card-link--floodline:focus {
background-color: var(--yellow);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
i.card-link--icon.fa-solid.fa-circle-arrow-right, i.card-link-icon.fa-solid.fa-circle-chevron-down { margin-left: 5px; }
i.card-link--icon.fa-solid.fa-circle-arrow-left { margin-right: 5px; }
/* Cards - CTAs Scottish Teal background
------------------------------------ */
.card--teal {
background: var(--scottish-teal);
color: #ffffff;
}
.card--teal .card-title, .card--teal .card-subtitle {
color: #ffffff;
}
.card--teal a, .banner--home-tealBg a, .card--teal a.card-link {
color: #ffffff;
font-weight: 500;
padding: 0 4px;
border-bottom: 2px solid #ffffff;
text-decoration: none;
}
.card--teal a:hover, .banner--home-tealBg a:hover, .card--teal a.card-link:hover {
background-color: var(--grey-three);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
.card--teal a:focus, .banner--home-tealBg a:focus, .card--teal a.card-link:focus {
background-color: var(--verdant-green);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
/* Cards - CTAs primary colours
------------------------------------ */
.card--scottish-teal { border-top: 8px solid var(--scottish-teal); }
.card--scottish-dark-teal { border-top: 8px solid var(--scottish-dark-teal); }
.card--verdant-green { border-top: 8px solid var(--verdant-green); }
/* Cards - CTAs Secondary colours
------------------------------------ */
.card--orange { border-top: 8px solid var(--orange); }
.card--yellow { border-top: 8px solid var(--yellow); }
.card--purple { border-top: 8px solid var(--purple); }
.card--blue { border-top: 8px solid var(--blue); }
.card--ash { border-top: 8px solid var(--ash); }
/* Cards - Iconography
------------------------------------ */
.card--icon--green {
width: 53%;
bottom: 0;
right: 13px;
}
@media (min-width: 768px) {
.card-icon-text, .card-icon-text-full { width: 100%; }
}
@media (min-width: 992px) {
/* Cards - CTAs with an icon */
.card--icon { background-size: 0%; }
.card-icon-text { width: 100%; }
}
@media (min-width: 1200px) {
/* Cards - CTAs with an icon */
.card--icon {
background-position: bottom right;
background-repeat: no-repeat;
background-size: 30%;
}
.card-icon-text { width: 65%; }
.card-icon-text-full { width: 80%; }
}
/* Cards - Scottish Flood Forecast
------------------------------------ */
.sff--card { border-top: 8px solid var(--verdant-green); }
.sff--card .card-header {
background-color: #ffffff;
color: var(--scottish-dark-teal);
border-bottom: 0;
border-radius: 0;
}
.sff--card .card-body {
text-align: center;
margin: 10px 0 20px 0;
}
.forecast--image {
object-fit: cover;
-o-object-fit: cover;
width: auto;
}
.sff--card .card-footer {
background-color: var(--grey-four);
padding: 15px;
}