<div class="homepage-alumni">
<div class="homepage-alumni__container">
<div class="homepage-alumni__wrapper">
<div class="alumni-feature-component js-alumni-feature-component alumni-feature-component--durp alumni-feature-component--">
<div class="alumni-feature-component__top">
<h2 class="alumni-feature-component__header alumni-feature-component__header--dark alumni-feature-component__header--strong" id="Join a community of change-makers">
Join a community of change-makers
</h2>
<div class="alumni-feature-component__controls">
<button class="alumni-feature-component__control-button-previous js-alumni-previous-button" type="button" aria-label="Move carousel items to the right">
<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="alumni-feature-component__control-button-next js-alumni-next-button" type="button" aria-label="Move carousel items to the left">
<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 class="alumni-feature-component__carousel js-alumni-carousel">
<div class="alumni-feature-component__background"></div>
<div class="alumni-feature-component__carousel-item js-alumni-carousel-item">
<div class="alumni-carousel-item alumni-carousel-item--full
alumni-carousel-item--durp">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--odd-dark">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--full
alumni-carousel-item__link--dark" data-alumni-carousel-link-index="1" href="">
Solving mobility challenges for the 21st century<span class="alumni-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="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
Ana Mendoza
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
MUP 2017
</p>
</div>
</div>
</div>
<div class="alumni-feature-component__carousel-item js-alumni-carousel-item">
<div class="alumni-carousel-item alumni-carousel-item--full
alumni-carousel-item--durp">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--even-dark">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--full
alumni-carousel-item__link--dark" data-alumni-carousel-link-index="2" href="">
Helping to develop one of the most progressive and innovative cities in the U.S.<span class="alumni-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="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
Aarav Pujari
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
BAUP 2014
</p>
</div>
</div>
</div>
<div class="alumni-feature-component__carousel-item js-alumni-carousel-item">
<div class="alumni-carousel-item alumni-carousel-item--full
alumni-carousel-item--durp">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--odd-dark">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--full
alumni-carousel-item__link--dark" data-alumni-carousel-link-index="3" href="">
Supporting businesses looking to relocate and expand in the city of Chicago<span class="alumni-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="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
Yolanda Richards-Albert
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
MUP 2011
</p>
</div>
</div>
</div>
<div class="alumni-feature-component__carousel-item js-alumni-carousel-item">
<div class="alumni-carousel-item alumni-carousel-item--full
alumni-carousel-item--durp">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=1" alt="alt text" width="332" height="432">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--even-dark">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--full
alumni-carousel-item__link--dark" data-alumni-carousel-link-index="4" href="">
Helping small business owners apply for complicated permits<span class="alumni-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="alumni-carousel-item__title alumni-carousel-item__title--full alumni-carousel-item__title--dark">
Teresa Chandler
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--dark">
MUP 2017
</p>
</div>
</div>
</div>
</div>
<div class="alumni-feature-component__button">
<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">I’m ready to learn more!</span><span class="standard-button__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></span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="homepage-alumni">
<div class="homepage-alumni__container">
<div class="homepage-alumni__wrapper">
{% include 'components/alumni-feature-component/alumni-feature-component.twig' with
{
component: alumni,
isOnFullWidthPage: true,
is_wordpress: is_wordpress|default
}
%}
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"alumni": {
"header": "Join a community of change-makers",
"callToAction": {
"text": "I’m ready to learn more!",
"url": "#"
},
"alumni": [
{
"image": {
"src": "https://picsum.photos/272/320?random=1",
"altText": "alt text"
},
"name": "Solving mobility challenges for the 21st century",
"title": "Ana Mendoza",
"graduationClass": "MUP 2017"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=1",
"altText": "alt text"
},
"name": "Helping to develop one of the most progressive and innovative cities in the U.S.",
"title": "Aarav Pujari",
"graduationClass": "BAUP 2014"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=1",
"altText": "alt text"
},
"name": "Supporting businesses looking to relocate and expand in the city of Chicago",
"title": "Yolanda Richards-Albert",
"graduationClass": "MUP 2011"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=1",
"altText": "alt text"
},
"name": "Helping small business owners apply for complicated permits",
"title": "Teresa Chandler",
"graduationClass": "MUP 2017"
}
]
}
}
.homepage-alumni
background-color cloud
overflow hidden
position relative
fluid(padding-bottom padding-top, 320px, maxContentWidth, 80px, 160px)
&__container
@extends $contentContainer
There are no notes for this item.