Components menu
Feature header
A decorative heading block featuring the page title, a summary and an image.
About this component
A feature header has:
- a title
- optional content that describes what’s on the page
- an optional image or icon
On small screens the image/icon will not be displayed.
Content that describes what’s on the page
HTML
<section class="banner--bg container-fluid">
<div class="container">
<div class="row">
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<h1 class="banner--heading">Page title</h1>
<p>Content that describes what’s on the page</p>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 position-relative">
<img class="position-absolute image--icon" src="" alt="">
</div>
</div>
</div>
</section>
CSS
/* Feature header
------------------------------------ */
.banner--bg {
color: #ffffff;
background: var(--scottish-teal);
padding: 20px 0px;
}
.image--icon {
bottom: -20px;
right: 12px;
height: auto;
width: 315px;
padding: 0;
margin: 0;
}
h1.banner--heading {
padding-bottom: 25px;
}
.banner--home-tealBg, .banner--content-tealBg {
background: var(--scottish-teal);
color: #ffffff;
border-radius: 0;
margin-bottom: 20px;
border-radius: 0;
padding-bottom: 0;
}
.banner--home-tealBg h2, .banner--content-tealBg h2 {
color: #ffffff;
}
.banner--home-tealBg h3, .banner--content-tealBg h3 {
color: #ffffff;
font-size: 1.2rem;
}
.banner--home-image, .banner--content-image {
position: relative;
}
.banner--home-image-icon, .banner--content-image-icon{
position: absolute;
bottom: 0;
right: 5px;
width: 60%;
}
.banner--home-image-icon img.img-fluid, .banner--content-image-icon img.img-fluid {
width: 40%;
height: auto;
float: right;
}
@media (min-width: 0px) and (max-width: 319px) {
.image--icon {
display: none;
}
}
@media (min-width: 320px) {
h1.banner--heading {
font-size: 2rem; /* 32px */
line-height: 2rem;
color: #ffffff;
font-weight: 600;
}
.image--icon {
display: none;
}
}
@media (min-width: 576px) {
h1.banner--heading {
font-size: 3rem; /* 48px */
line-height: 3rem;
}
}
@media (min-width: 768px) {
h1.banner--heading {
font-size: 3rem; /* 48px */
line-height: 3rem;
}
.image--icon {
width: 80%;
display: block;
}
}
@media (min-width: 992px) {
h1.banner--heading {
font-size: 4rem; /* 64px */
line-height: 4rem;
}
.image--icon {
width: 65%;
}
}
@media (min-width: 1200px) {
.image--icon {
width: 55%;
}
}
@media (min-width: 1400px) {
.image--icon {
width: 50%;
}
}