No notes defined.
<div class="quote-banner quote-banner--bg-burgundy quote-banner--reverse align-full">
<div class="wrap">
<div class="quote-banner__flexContainer">
<div class="quote-banner__quoteContainer">
<blockquote class="blockquote--large">
<q class="blockquote__title">After coming to Staffs, it feels like my future looks different, very bright in fact.</q>
<footer class="blockquote__footer">
<cite class="cite">Zenith Shaileshkumar Vaghasiya</cite>
<p>MA Sports Journalism graduate, 2020</p>
</footer>
</blockquote>
</div>
<figure class="quote-banner__figure quote-banner__figure--align-bottom">
<img src="../../images/placeholder-transparent-person.png" alt="person smiling" />
</figure>
</div>
</div>
</div>
<div class="quote-banner quote-banner--bg-burgundy quote-banner--reverse align-full">
<div class="wrap">
<div class="quote-banner__flexContainer">
<div class="quote-banner__quoteContainer">
<blockquote class="blockquote--large">
<q class="blockquote__title">{{ quoteText }}</q>
<footer class="blockquote__footer">
<cite class="cite">{{ quoteSource }}</cite>
<p>{{ quoteQualification }}</p>
</footer>
</blockquote>
</div>
<figure class="quote-banner__figure quote-banner__figure--align-bottom">
<img src="{{ '/images/placeholder-transparent-person.png' | path }}" alt="person smiling" />
</figure>
</div>
</div>
</div>
.quote-banner {
position: relative;
overflow: hidden;
color: white;
background: $burgundy url('#{$image-theme-directory}/bg-knot-whole-red.svg');
background-repeat: no-repeat;
background-position: right center;
background-size: 55%;
@each $name, $value in $banner-bg-colors {
&--bg-#{$name} {
@if $name == 'digital-blue' {
background-color: #{$value};
background-image: url('#{$image-theme-directory}/bg-knot-whole-neon.svg');
}
@else if $name == 'teal' {
background-color: #{$value};
background-image: url('#{$image-theme-directory}/bg-knot-whole-neon.svg');
}
}
}
.card {
border: 0;
}
&__flexContainer {
margin: 0 -#{$grid-gutter};
min-height: 50vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
&--reverse {
.quote-banner__flexContainer {
flex-direction: row-reverse;
}
}
&__figure {
margin: $spacing-xl $grid-gutter 0;
flex: 1 1 40%;
&--align-bottom {
margin: 0 $grid-gutter;
align-self: flex-end;
}
img {
margin: auto;
max-height: 75vh;
width: auto;
}
}
& .blockquote__title {
color: white;
}
&__quoteContainer {
margin: $spacing-xl $grid-gutter;
flex: 1 1 20em;
}
}