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.
HTML
<div class="row">
<div class="col-xxl-6 col-xl-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>
<h3 class="card-subtitle"> Card subtitle </h3>
<div class="card-text">
<p> Card message goes here over a maximum of three lines. </p>
</div>
</div>
<div class="card-footer">
<a href="" class="card-link" title="View card information"> View card information <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-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>
<h3 class="card-subtitle"> Card subtitle </h3>
<div class="card-text">
<p> Card message goes here over a maximum of three lines. </p>
</div>
</div>
<div class="card-footer">
<a href="" class="card-link--floodline" title="View card information"> View card information <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</div>
</div>
</div>
</div>
Icongraphy - 100% width (teal background)
Title
Banner related text description would be displayed here. 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>
<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"> Card link <i class="card-link--icon fa-solid fa-circle-arrow-right" aria-hidden="true"></i> </a>
</div>
</div>
</div>
<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>
</div>
</div>
</div>
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;
line-height: 2rem;
}
a.card-link--tealBg {
color: #ffffff;
border-bottom: 2px solid #ffffff;
text-decoration: none;
font-weight: 500;
line-height: 2rem;
}
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 - Column lists
------------------------------------ */
@media (min-width: 320px) {
.card-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
}
@media (min-width: 576px) {
.card-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
}
@media (min-width: 768px) {
.card-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 3em;
-moz-column-gap: 3em;
column-gap: 3em;
}
}
/* 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%; }
}