No notes defined.
<div class="banner banner--with-image banner--bg-digital-blue">
<div class="banner__bg" style="background-image: url(https://picsum.photos/1200/400?random=1);">
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title title--bg-white text-center">
<h2 class="h4 title__highlight">Undergraduate Open Day</h3>
</div>
<div class="title text-center">
<div class="h5">Saturday 28 June 2024 - Stoke-on-trent campus</div>
</div>
<div class="title">
<p>Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta text-center">
<a href="" class="button">Book an open day - a long button title</a>
</div>
</div>
</div>
<div class="banner banner--with-image banner--bg-burgundy">
<div class="banner__bg" style="background-image: url(https://picsum.photos/1200/400?random=2);">
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title title--bg-white text-center">
<h2 class="h4 title__highlight">Undergraduate Open Day</h3>
</div>
<div class="title text-center">
<div class="h5">Saturday 28 June 2024 - Stoke-on-trent campus</div>
</div>
<div class="title">
<p>Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta text-center">
<a href="" class="button">Book an open day - a long button title</a>
</div>
</div>
</div>
<div class="banner banner--with-image banner--bg-teal">
<div class="banner__bg" style="background-image: url(https://picsum.photos/1200/400?random=3);">
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title text-center">
<h2 class="h4 title--bg-white title__highlight">Undergraduate Open Day</h3>
</div>
<div class="title text-center">
<div class="h5">Saturday 28 June 2024 - Stoke-on-trent campus</div>
</div>
<div class="title">
<p>Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta text-center">
<a href="" class="button">Book an open day - a long button title</a>
</div>
</div>
</div>
<div class="banner banner--with-image banner--bg-digital-blue">
<div class="banner__bg" style="background-image: url(https://picsum.photos/1200/400?random=1);">
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title title--bg-white text-center">
<h2 class="h4 title__highlight">Undergraduate Open Day</h3>
</div>
<div class="title text-center">
<div class="h5">Saturday 28 June 2024 - Stoke-on-trent campus</div>
</div>
<div class="title">
<p>Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta text-center">
<a href="" class="button">Book an open day - a long button title</a>
</div>
</div>
</div>
<div class="banner banner--with-image banner--bg-burgundy">
<div class="banner__bg" style="background-image: url(https://picsum.photos/1200/400?random=2);">
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title title--bg-white text-center">
<h2 class="h4 title__highlight">Undergraduate Open Day</h3>
</div>
<div class="title text-center">
<div class="h5">Saturday 28 June 2024 - Stoke-on-trent campus</div>
</div>
<div class="title">
<p>Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta text-center">
<a href="" class="button">Book an open day - a long button title</a>
</div>
</div>
</div>
<div class="banner banner--with-image banner--bg-teal">
<div class="banner__bg" style="background-image: url(https://picsum.photos/1200/400?random=3);">
</div>
<div class="banner__body">
<div class="hgroup">
<div class="title text-center">
<h2 class="h4 title--bg-white title__highlight">Undergraduate Open Day</h3>
</div>
<div class="title text-center">
<div class="h5">Saturday 28 June 2024 - Stoke-on-trent campus</div>
</div>
<div class="title">
<p>Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
</div>
</div>
<div class="banner__cta text-center">
<a href="" class="button">Book an open day - a long button title</a>
</div>
</div>
</div>
.banner {
position: relative;
display: flex;
margin-bottom: $spacing-xl;
color: #fff;
border-radius: $spacing-xs;
@each $name, $value in $banner-bg-colors {
&--bg-#{$name} {
background: #{$value};
@if (choose-contrast-color($value) == white) {
color: white;
& h2 {
color: white;
}
}
}
}
&__title {
font-weight: 700;
}
&--bg-dark-blue &__title {
color: $neon;
}
&--bg-dark-blue &__theme svg, &--bg-neon &__theme svg {
fill: $neon;
}
&--with-image {
border-radius: 0;
& .banner__cta, & .hgroup {
text-align: center;
}
@each $name, $value in $banner-bg-colors {
&.banner--bg-#{$name} {
& .title__highlight {
color: #{$value};
}
}
}
@media (min-width: map_get($breakpoint-stages, 'tablet')) {
.banner__body {
width: 50%;
}
}
@media (max-width: map_get($breakpoint-stages, 'tablet')) {
display: block;
.hgroup {
margin-top: -$spacing-2xl;
}
.banner__body {
width: 100%;
}
.banner__bg {
width: 100%;
height: 200px;
}
}
}
&__bg {
width: 50%;
background-size: cover;
background-position: center center;
}
&__theme {
position: absolute;
right: 0;
bottom: 0;
width: 30%;
height: 70%;
overflow: hidden;
z-index: 0;
svg {
height: 100%;
width: 100%;
object-position: right bottom;
object-fit: contain;
fill: white;
}
}
&__body {
position: relative;
align-self: flex-end;
box-sizing: border-box;
width: 70%;
z-index: 1;
padding: #{$spacing-xl} calc(#{$spacing-sm} + 2.5%) #{$spacing-md};
}
.wrap {
.banner__body {
padding-left: 0;
padding-right: 0;
}
}
}