<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="">
<span class="homepage-carousel-item__link-prefix">
Meet
</span>
<span class="homepage-carousel-item__link-text">
</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">
</p>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="homepage-carousel-item">
<div class="homepage-carousel-item__image-container">
{{ imageMacros.createAlwaysFullWidth(item.image, 1600, 1120, background) }}
<div class="homepage-carousel-item__blurred-image-container">
{{ imageMacros.createAlwaysFullWidth(item.image, 1600, 1120, background) }}
</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">
{% include 'bits/orange-line/orange-line.twig' %}
</div>
<h2 class="homepage-carousel-item__header">
{{ item.topic }}
</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">
{% include 'bits/icons/quote.twig' %}
</div>
<p class="homepage-carousel-item__text">
{{ item.quote }}
</p>
<a class="homepage-carousel-item__link" href="{{ item.reference.url }}" data-carousel-link-index="{{ loop.index }}">
<span class="homepage-carousel-item__link-prefix">
{% if item.reference.postType == 'news' %}
Read
{% else %}
Meet
{% endif %}
</span>
<span class="homepage-carousel-item__link-text">
{% if item.reference.postType == 'news' %}
more
{% else %}
{{ item.reference.name }}
{% endif %}
</span>
<span class="homepage-carousel-item__link-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
</a>
<p class="homepage-carousel-item__reference-description">
{{ item.reference.description }}
</p>
</div>
</div>
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"item": {
"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.",
"person": {
"name": "Ana Mendoza",
"description": "PhD candidate"
}
}
}
.homepage-carousel-item
position relative
width 100vw
&__image-container
padding-right 7.5vw
position relative
& figure
width 100%
min-height 100%
max-width unset
min-width 100vw
width auto
& img
height 372px
object-fit cover
+above(largeDeviceBreakpoint)
height 800px
+above(maxContentWidth)
height 1040px
$leftOverlay
overflow hidden
position absolute
top 0
bottom 0
left 0
width 25vw
+above(largeDeviceBreakpoint)
right calc(50% + 80px)
width auto
&__blurred-image-container
@extends $leftOverlay
& figure
filter blur(5px)
height 100%
left 0
max-width unset
position absolute
top 0
+above(largeDeviceBreakpoint)
height auto
min-height 100%
min-width 100vw
&__image-overlay
background-color #3D454C
position absolute
top 0
right 7.5vw
bottom 0
left 0
opacity .5
@supports (mix-blend-mode: multiply)
mix-blend-mode multiply
@supports not (mix-blend-mode: multiply)
opacity .1
&__image-blur
@extends $leftOverlay
background-color #3D454C
opacity .7
@supports (mix-blend-mode: multiply)
mix-blend-mode multiply
@supports not (mix-blend-mode: multiply)
opacity .25
&__white-block
background-color white
position absolute
top 0
right 0
bottom 0
width 7.5vw
&__orange-image-overlay
background-color illiniOrange
position absolute
top 0
right 0
bottom 0
width 25vw
@supports (mix-blend-mode: multiply)
mix-blend-mode multiply
@supports not (mix-blend-mode: multiply)
opacity .25
&__title-container
@extends $contentContainer
position absolute
top 32px
right 0
left 0
+above(largeDeviceBreakpoint)
top 48px
+above(maxContentWidth)
top 96px
&__title-content
+above(largeDeviceBreakpoint)
max-width 67vw
+above(maxContentWidth)
max-width 880px
&__orange-line
margin-bottom 16px
+above(largeDeviceBreakpoint)
margin-bottom 24px
&__header
@extends $billboardTitle
color white
&__text-container
@extends $contentContainer
background-color cloudDark
padding-bottom 20px
position relative
+above(largeDeviceBreakpoint)
background-color transparent
padding-bottom 0
position absolute
right 0
bottom 48px
left 0
+above(maxContentWidth)
bottom 104px
&__text-content
+above(largeDeviceBreakpoint)
max-width calc(50vw - 150px)
+above(maxContentWidth)
max-width 540px
&__text-overlay
background-color cloudDark
height 24px
left 0
position absolute
top -24px
width 152px
+above(largeDeviceBreakpoint)
display none
&__quote-icon
margin -4px 0 8px
&__text
@extends $primaryParagraph
margin-bottom 16px
+above(largeDeviceBreakpoint)
color white
&__link
color charcoalLight
font-family metaSerifPro
font-size 24px
text-decoration none
+above(largeDeviceBreakpoint)
color white
&:focus
&:hover
&:active
.homepage-carousel-item__link-icon
transform translate(4px, 0)
&__link-prefix
color illiniOrangeLight
display inline
&__link-icon
display inline-block
transition all 0.3s ease
&__reference-description
@extends $primaryParagraph
+above(largeDeviceBreakpoint)
color white
There are no notes for this item.