<div class="quote-component quote-component--light quote-component--durp quote-component--large">
<div class="quote-component__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/600/500?random=1" alt="tall building" width="200" height="250">
</figure>
</div>
<div class="quote-component__content-container">
<div class="quote-component__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>
<div class="quote-component__quote quote-component__quote--light quote-component__quote--large">
There are learning opportunities at every corner, and you never feel out of place or like you are just another number in the system.
</div>
<div class="quote-component__attribution quote-component__attribution--light">
Ana Mendoza, BAUSP candidate
</div>
<div class="quote-component__button">
<a href="#" class="standard-button standard-button--durp standard-button--light
standard-button---width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Meet Ana</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>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="quote-component quote-component--{{ background }} quote-component--{{ siteUnit }} quote-component--{{ componentSpacing }}">
{% if component.image %}
<div class="quote-component__image">
{{ imageMacros.create(component.image, 200, 250, background) }}
</div>
{% endif %}
<div class="quote-component__content-container">
<div class="quote-component__icon"> {% include 'bits/icons/quote.twig' %}</div>
<div class="quote-component__quote quote-component__quote--{{ background }} quote-component__quote--{{ component.textSize|default('large') }}">
{{ component.quote }}
</div>
<div class="quote-component__attribution quote-component__attribution--{{ background }}">
{{ component.attribution }}
</div>
{% if component.callToAction %}
<div class="quote-component__button">
{% set buttonColor = background == 'light' ? 'charcoalLighter' : 'cloud' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: component.callToAction.type|default('internal') ~ '-link',
text: component.callToAction.text,
url: component.callToAction.url,
}
} %}
</div>
{% endif %}
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "quote",
"quote": "There are learning opportunities at every corner, and you never feel out of place or like you are just another number in the system.",
"attribution": "Ana Mendoza, BAUSP candidate",
"image": {
"src": "https://picsum.photos/600/500?random=1",
"altText": "tall building"
},
"callToAction": {
"text": "Meet Ana",
"url": "#"
},
"textSize": "large"
}
}
.quote-component
--iconFillColor illiniOrange
&--arch
--iconFillColor industrialBlue
&--art
--iconFillColor archesBlue
&--college
--iconFillColor illiniOrange
&--dance
--iconFillColor archesBlue
&--durp
--iconFillColor illiniOrange
&--landarch
--iconFillColor illiniOrange
&--theatre
--iconFillColor illiniOrange
&--music
--iconFillColor illiniOrange
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
display flex
padding quoteComponentPadding = 24px
position relative
&--light
background-color cloud
&--dark
background-color charcoalLighter
&__icon
width iconWidth = 24px
margin-bottom 16px
& svg path
fill var(--iconFillColor)
&__quote
@extends $headline1
margin-bottom 16px
&--large
@extends $headline1
&--medium
@extends $primaryLead
&--small
@extends $secondaryLead
&--music &__quote
color illiniBlue
&__attribution
@extends $primaryParagraph
margin-bottom 24px
&__content-container
display flex
flex-direction column
&__image
display none
margin-bottom 24px
+above(quoteCardBreakpoint)
display flex
flex 0 1 50%
left -1 * quoteComponentPadding
position relative
margin-right 12px
min-width 200px
max-width 250px
max-height 300px
+above(largeDeviceBreakpoint)
margin-right 24px
&__text
@extends $secondaryParagraph
margin-bottom 24px
There are no notes for this item.