The image quote is used to display current or former students or staff’s accounts of their experiences at the University. Currently purposely built and used only for the web improvements project.
Max character count needed. The position of image and text container are fixed. The text will align center vertically. However if character count is ignored text will overspill the container.
4:5 (344 x 430px across the viewpoints)
This component was originally built just for the corporate homepage, but it has been enhanced so it can work in document, article and course pages with or without side navigation.
The component also has a theme selection ability. By default the component has a teal background theme. By setting the ‘theme’ parameter to ‘cream’, this changes this styling (optimised for course pages displaying cream key facts).
The component also has the ability to apply a link to the quote.
'context': {
'image': {
'src': '/placeholders/new-homepage/student-portrait-2.png',
'alt': 'Portrait of Jefferson Sanchez'
},
'theme': 'cream',
'quote': {
'content': 'This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me. ',
'cite': {
'content': 'Student name, Course Name',
'url': '/test-url'
}
},
<section class="image-quote {{ 'image-quote--' + theme if theme }}">
<div class="image-quote__edge"></div>
<div class="image-quote__img-and-video">
<img class="image-quote__img" src="https://www.leeds.ac.uk/images/resized/344x430-0-0-1-80-Untitled_design__40__2.png" />
{% if videoUrl %}
<a href="{{ videoUrl }}}"><button id="playButton" class="image-quote__button uol-button uol-icon uol-icon--mdiPlay uol-icon--icon-only uol-icon--icon-only--large" type="button">Link to video</button></a>
{% endif %}
</div>
<div class="image-quote__text-container">
<div class="image-quote__text-container--inner">
{% render '@uol-typography-blockquote', quote %}
</div>
</div>
<div class="image-quote__edge"></div>
</section>
<section class="image-quote image-quote--cream">
<div class="image-quote__edge"></div>
<div class="image-quote__img-and-video">
<img class="image-quote__img" src="https://www.leeds.ac.uk/images/resized/344x430-0-0-1-80-Untitled_design__40__2.png" />
</div>
<div class="image-quote__text-container">
<div class="image-quote__text-container--inner">
<blockquote class="uol-typography-blockquote" cite="/test-url">
This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me.
<footer>
<cite>
<a href="/test-url">
Student name, Course Name
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
<div class="image-quote__edge"></div>
</section>
.image-quote {
--quoteBgColour: #{$color-brand-teal};
--quoteAccentColour: #{$color-brand-cream};
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
margin: 32px 0;
@include media('>=uol-media-l') {
max-width: none;
flex-direction: row;
}
.image-quote__edge {
min-width: 48px;
background-image: linear-gradient(white calc(15% + 40px), var(--quoteBgColour) calc(15% + 40px));
@include media('>=uol-media-m') {
width: calc((100% - 1440px) / 2);
}
}
.image-quote__img-and-video {
position: relative;
@include media('>=uol-media-l') {
margin-bottom: -5px;
}
}
.image-quote__button {
position: absolute !important;
bottom: -56px;
right: 16px;
@include media('>=uol-media-m') {
bottom: -56px;
left: 320px;
}
@include media('>=uol-media-l') {
bottom: -10px;
left: 320px;
}
}
.image-quote__img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
z-index: 2;
margin-bottom: -45px;
@include media('>=uol-media-s') {
width: 344px !important;
max-width: none !important;
}
@include media('>=uol-media-l') {
margin-bottom: 0;
}
}
.image-quote__text-container {
background-image: linear-gradient(var(--quoteBgColour));
padding: calc(64px + 32px) 32px 32px;
display: flex;
align-items: center;
@include media('>=uol-media-s') {
background-image: linear-gradient(var(--quoteAccentColour) 40px, var(--quoteBgColour) 40px);
}
@include media('>=uol-media-l') {
width: 100%;
background-image: linear-gradient(white 15%, var(--quoteAccentColour) 15%, var(--quoteAccentColour) calc(15% + 40px), var(--quoteBgColour) calc(15% + 40px));
display: flex;
align-items: flex-end;
min-height: inherit;
padding: 32px 0 10px 48px;
}
}
.image-quote__text-container--inner {
line-height: 22px;
padding-left: 0;
height: calc(85% - 40px);
display: flex;
align-items: center;
}
.uol-typography-blockquote {
@extend %uol-font-sans-serif;
font-style: normal;
font-weight: 600;
line-height: 1.75rem; //28px
font-size: 1.25rem!important; //20px
padding: 20px 10px 0 10px;
&:first-child {
margin-top: 0;
}
margin-bottom: 16px !important;
@include media('>=uol-media-m') {
margin-bottom: 0;
}
@include media('>=uol-media-m') {
max-width: 49rem;
}
@include media('>=uol-media-m', '<uol-media-l') {
margin-bottom: 1.75rem;
}
&::before {
color: $color-black;
left: -0.625rem;
}
cite {
display: block;
color: $color-black;
font-style: normal;
margin-top: 1rem;
}
}
}
.uol-course__content,
.uol-article__content,
.uol-page__content {
.image-quote {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@include media('>=uol-media-xl') {
max-width: none;
flex-direction: row;
}
}
.image-quote__edge {
background-image: linear-gradient(white calc(15% + 40px), var(--quoteBgColour) calc(15% + 40px));
}
.image-quote__img {
width: 100%;
aspect-ratio: 3/4;
object-fit: cover;
z-index: 2;
margin-bottom: -40px;
margin-top: 0 !important;
@include media('>=uol-media-m') {
width: 344px !important;
max-width: none !important;
}
@include media('>=uol-media-xl') {
margin-bottom: 0;
}
}
.image-quote__text-container {
background-image: linear-gradient(var(--quoteAccentColour) 40px, var(--quoteBgColour) 40px);
background-image: linear-gradient(var(--quoteAccentColour) 40px, var(--quoteBgColour) 40px);
padding: calc(64px + 32px) 32px 32px;
display: flex;
align-items: center;
@include media('>=uol-media-xl') {
background-image: linear-gradient(white 15%, var(--quoteAccentColour) 15%, var(--quoteAccentColour) calc(15% + 40px), var(--quoteBgColour) calc(15% + 40px));
display: flex;
align-items: flex-end;
min-height: inherit;
padding: 34px 0 10px 40px;
}
}
}
.image-quote--cream {
--quoteBgColour: #{$color-brand-cream};
--quoteAccentColour: white; // second colour looks odd with cream so use white
}
{
"image": {
"src": "/placeholders/new-homepage/student-portrait-2.png",
"alt": "Portrait of Jefferson Sanchez"
},
"quote": {
"content": "This whole experience has taught me to put myself out there, and do what makes me uncomfortable. If I had been too afraid to move out come to Leeds, I would not be where I am now, with the fantastic memories and people I have surrounding me. ",
"cite": {
"content": "Student name, Course Name",
"url": "/test-url"
}
},
"theme": "cream"
}