<div class="homepage-carousel js-homepage-carousel">
<div class="homepage-carousel__carousel js-homepage-carousel-carousel">
<div class="homepage-carousel__item js-homepage-carousel-item">
<div class="homepage-carousel-item">
<div class="homepage-carousel-item__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
</picture>
</figure>
<div class="homepage-carousel-item__blurred-image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
</picture>
</figure>
</div>
<div class="homepage-carousel-item__image-overlay"></div>
<div class="homepage-carousel-item__image-blur"></div>
<div class="homepage-carousel-item__white-block"></div>
<div class="homepage-carousel-item__orange-image-overlay"></div>
</div>
<div class="homepage-carousel-item__title-container">
<div class="homepage-carousel-item__title-content">
<div class="homepage-carousel-item__orange-line">
<svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="32" height="8" />
</svg>
</div>
<h2 class="homepage-carousel-item__header">
Planning for sustainability
</h2>
</div>
</div>
<div class="homepage-carousel-item__text-container">
<div class="homepage-carousel-item__text-content">
<div class="homepage-carousel-item__text-overlay"></div>
<div class="homepage-carousel-item__quote-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-carousel-item__text">
I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.
</p>
<a class="homepage-carousel-item__link" href="#" data-carousel-link-index="1">
<span class="homepage-carousel-item__link-prefix">
Meet
</span>
<span class="homepage-carousel-item__link-text">
Ana Mendoza
</span>
<span class="homepage-carousel-item__link-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" 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>
</a>
<p class="homepage-carousel-item__reference-description">
PhD candidate
</p>
</div>
</div>
</div>
</div>
<div class="homepage-carousel__item js-homepage-carousel-item">
<div class="homepage-carousel-item">
<div class="homepage-carousel-item__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
</picture>
</figure>
<div class="homepage-carousel-item__blurred-image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
</picture>
</figure>
</div>
<div class="homepage-carousel-item__image-overlay"></div>
<div class="homepage-carousel-item__image-blur"></div>
<div class="homepage-carousel-item__white-block"></div>
<div class="homepage-carousel-item__orange-image-overlay"></div>
</div>
<div class="homepage-carousel-item__title-container">
<div class="homepage-carousel-item__title-content">
<div class="homepage-carousel-item__orange-line">
<svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="32" height="8" />
</svg>
</div>
<h2 class="homepage-carousel-item__header">
Planning for sustainability
</h2>
</div>
</div>
<div class="homepage-carousel-item__text-container">
<div class="homepage-carousel-item__text-content">
<div class="homepage-carousel-item__text-overlay"></div>
<div class="homepage-carousel-item__quote-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-carousel-item__text">
I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.
</p>
<a class="homepage-carousel-item__link" href="#" data-carousel-link-index="2">
<span class="homepage-carousel-item__link-prefix">
Read
</span>
<span class="homepage-carousel-item__link-text">
more
</span>
<span class="homepage-carousel-item__link-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" 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>
</a>
<p class="homepage-carousel-item__reference-description">
DURP Alumni makes headlines
</p>
</div>
</div>
</div>
</div>
<div class="homepage-carousel__item js-homepage-carousel-item">
<div class="homepage-carousel-item">
<div class="homepage-carousel-item__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
</picture>
</figure>
<div class="homepage-carousel-item__blurred-image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/1488/1040?random=1 1600w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/1488/1040?random=1" alt="">
</picture>
</figure>
</div>
<div class="homepage-carousel-item__image-overlay"></div>
<div class="homepage-carousel-item__image-blur"></div>
<div class="homepage-carousel-item__white-block"></div>
<div class="homepage-carousel-item__orange-image-overlay"></div>
</div>
<div class="homepage-carousel-item__title-container">
<div class="homepage-carousel-item__title-content">
<div class="homepage-carousel-item__orange-line">
<svg class="orange-line" width="32" height="8" viewBox="0 0 32 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="32" height="8" />
</svg>
</div>
<h2 class="homepage-carousel-item__header">
Planning for sustainability
</h2>
</div>
</div>
<div class="homepage-carousel-item__text-container">
<div class="homepage-carousel-item__text-content">
<div class="homepage-carousel-item__text-overlay"></div>
<div class="homepage-carousel-item__quote-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-carousel-item__text">
I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.
</p>
<a class="homepage-carousel-item__link" href="#" data-carousel-link-index="3">
<span class="homepage-carousel-item__link-prefix">
Meet
</span>
<span class="homepage-carousel-item__link-text">
Ana Mendoza
</span>
<span class="homepage-carousel-item__link-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" 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>
</a>
<p class="homepage-carousel-item__reference-description">
PhD candidate
</p>
</div>
</div>
</div>
</div>
</div>
<div class="homepage-carousel__controls-background"></div>
<div class="homepage-carousel__controls-container">
<div class="homepage-carousel__controls">
<button class="homepage-carousel__control-button-previous js-homepage-carousel-previous-button" type="button" aria-label="Go to previous carousel item">
<svg class="left-chevron" xmlns="http://www.w3.org/2000/svg" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark left-chevron__shape" fill="#E84A27" fill-rule="nonzero" d="M7.768 1.65c.346-.419.3-1.05-.104-1.41a.937.937 0 0 0-1.356.11L0 8l6.308 7.65a.937.937 0 0 0 1.356.11c.403-.36.45-.991.104-1.41L2.534 8l5.234-6.35z"/>
</svg>
</button>
<button class="homepage-carousel__control-button-next js-homepage-carousel-next-button" type="button" aria-label="Go to next carousel item">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" 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>
</button>
</div>
</div>
</div>
<div class="homepage-carousel js-homepage-carousel">
<div class="homepage-carousel__carousel js-homepage-carousel-carousel">
{% for item in homepageCarousel.items %}
<div class="homepage-carousel__item js-homepage-carousel-item">
{% include 'partials/homepage-carousel-item/homepage-carousel-item.twig' with {
item: item
} %}
</div>
{% endfor %}
</div>
<div class="homepage-carousel__controls-background"></div>
<div class="homepage-carousel__controls-container">
<div class="homepage-carousel__controls">
<button class="homepage-carousel__control-button-previous js-homepage-carousel-previous-button" type="button" aria-label="Go to previous carousel item">
{% include "bits/icons/left-chevron.twig" %}
</button>
<button class="homepage-carousel__control-button-next js-homepage-carousel-next-button" type="button" aria-label="Go to next carousel item">
{% include "bits/icons/right-chevron.twig" %}
</button>
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"homepageCarousel": {
"items": [
{
"image": {
"src": "https://picsum.photos/1488/1040?random=1",
"alt": "A cute kitten"
},
"topic": "Planning for sustainability",
"quote": "I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.",
"reference": {
"name": "Ana Mendoza",
"description": "PhD candidate",
"url": "#"
}
},
{
"image": {
"src": "https://picsum.photos/1488/1040?random=1",
"alt": "A cute kitten"
},
"topic": "Planning for sustainability",
"quote": "I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.",
"reference": {
"postType": "news",
"description": "DURP Alumni makes headlines",
"url": "#"
}
},
{
"image": {
"src": "https://picsum.photos/1488/1040?random=1",
"alt": "A cute kitten"
},
"topic": "Planning for sustainability",
"quote": "I examine how growing ethnic and racial diversity in the Midwest is understood and utilized by cities that have seen a significant increase in immigration.",
"reference": {
"name": "Ana Mendoza",
"description": "PhD candidate",
"url": "#"
}
}
]
}
}
.homepage-carousel
overflow hidden
position relative
width 100vw
&__carousel
display flex
transition transform 0.7s ease
&__item
background-color cloudDark
flex-shrink 0
&__controls-background
background-color cloud
height 76px
position absolute
right 0
bottom 0
left calc(100vw - 80px)
+above(500px)
left calc(100vw - 104px)
+above(largeDeviceBreakpoint)
height 104px
left calc(100vw - 296px)
+above(maxContentWidth)
height 160px
left s('calc(50vw + .5 * %s - 444px)', maxContentWidth)
&__controls-container
@extends $contentContainer
display flex
justify-content flex-end
position absolute
pointer-events none
right 0
bottom 20px
left 0
+above(largeDeviceBreakpoint)
bottom 32px
+above(maxContentWidth)
bottom 80px
&__controls
display flex
pointer-events all
$controlButton
border solid 2px illiniOrange
border-radius 50%
cursor pointer
height 48px
width 48px
&:focus
&:hover
background-color illiniOrange
& ._mark
fill white
& > svg
height 16px
margin-top 3px
width 8px
&__control-button-previous
@extends $controlButton
display none
+above(largeDeviceBreakpoint)
display block
margin-right 16px
& > svg
margin-right 4px
&__control-button-next
@extends $controlButton
+below(largeDeviceBreakpoint)
height 40px
width 40px
& > svg
margin-left 4px
There are no notes for this item.