<div class="homepage-testimonial">
<div class="homepage-testimonial__container">
<div class="homepage-testimonial__wrapper">
<div class="homepage-testimonial__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/400/496?random=1" alt="" width="690" height="860">
</figure>
</div>
<div class="homepage-testimonial__content">
<blockquote class="homepage-testimonial__quote">
<div class="homepage-testimonial__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20">
<path fill="#E84A27" fill-rule="evenodd" d="M24 10h-4.5c0-3.162 1.586-4.814 4.5-5V0c-5 0-8.078 2.17-9.318 6.262C14.186 7.998 14 10.106 14 13.64V20h10V10zm-14 0H5.5c0-3.162 1.586-4.814 4.5-5V0C5 0 1.922 2.17.682 6.262.186 7.998 0 10.106 0 13.64V20h10V10z"/>
</svg>
</div>
<p class="homepage-testimonial__quote-text">
I’m worried about the world and I wasn’t fulfilled in my work. Urban planning changed all that. I found my calling and I’m doing my part to transform society.
</p>
<footer class="homepage-testimonial__quote-attribution">
John Kwan, BAUSP candidate
</footer>
</blockquote>
<div class="homepage-testimonial__cta">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Meet John</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/></svg></span></span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="homepage-testimonial">
<div class="homepage-testimonial__container">
<div class="homepage-testimonial__wrapper">
<div class="homepage-testimonial__image">
{{ imageMacros.create(testimonial.image, 690, 860, background) }}
</div>
<div class="homepage-testimonial__content">
<blockquote class="homepage-testimonial__quote">
<div class="homepage-testimonial__icon">
{% include 'bits/icons/quote.twig' %}
</div>
<p class="homepage-testimonial__quote-text">
{{ testimonial.quote }}
</p>
<footer class="homepage-testimonial__quote-attribution">
{{ testimonial.quoteAttribution }}
</footer>
</blockquote>
{% if testimonial.hasLink %}
<div class="homepage-testimonial__cta">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'internal-link',
text: testimonial.linkText,
url: testimonial.link,
width: regular,
}
} %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"testimonial": {
"quote": "I’m worried about the world and I wasn’t fulfilled in my work. Urban planning changed all that. I found my calling and I’m doing my part to transform society.",
"quoteAttribution": "John Kwan, BAUSP candidate",
"hasLink": true,
"link": "#",
"linkText": "Meet John",
"image": {
"src": "https://picsum.photos/400/496?random=1",
"alt": "Example alt text"
}
}
}
breakpointSmall = 784px
breakpointLarge = 1300px
backgroundPosition()
content ""
display block
height 75vw
left 0
position absolute
top 0
width 100vw
+above(breakpointSmall)
bottom 0
height auto
left calc(100% * (5 / 8))
position absolute
top 0
width s('calc((%s * (5 / 8)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth)
+above(breakpointLarge)
left calc(100% * (8 / 12))
width s('calc((%s * (8 / 12)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth)
.homepage-testimonial
background-color charcoalLighter
position relative
&__container
@extends $contentContainer
+below(breakpointSmall)
padding-bottom 80px
padding-top 80px
&__wrapper
+above(breakpointSmall)
@supports (display: grid)
display grid
grid-template-columns 3fr 5fr
position relative
+above(breakpointLarge)
grid-template-columns 4fr 8fr
&:before
background transparent url('../assets/images/crosswalk.jpg') no-repeat left center
background-size cover
mix-blend-mode multiply
opacity 0.15
backgroundPosition()
&:after
background-color charcoalLighter
mix-blend-mode color
backgroundPosition()
&__image
margin-bottom 32px
position relative
z-index 1
+above(breakpointSmall)
padding-right 32px
+above(breakpointLarge)
padding-right 48px
& figure
height auto
&__content
position relative
z-index 1
+above(breakpointSmall)
margin-bottom 128px
margin-top 128px
&__icon
margin-bottom 16px
&__quote-text
@extends $headline1
color white
margin-bottom 16px
&__quote-attribution
@extends $secondaryParagraph
color grey
&__cta
margin-top 32px
There are no notes for this item.