<div class="alumni-feature-component js-alumni-feature-component alumni-feature-component--network alumni-feature-component--large">
<div class="alumni-feature-component__top">
<h2 class="alumni-feature-component__header alumni-feature-component__header--light " id="Optional header for the alumni feature component">
Optional header for the alumni feature component
</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__carousel-item js-alumni-carousel-item">
<div class="alumni-carousel-item
alumni-carousel-item--network">
<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="272" height="320">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--odd-light">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--light" data-alumni-carousel-link-index="1" href="">
Ana Mendoza<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--light">
Project manager at WeWork
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--light">
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--network">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=2" alt="alt text" width="272" height="320">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--even-light">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--light" data-alumni-carousel-link-index="2" href="">
Aarav Pujari<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--light">
Marketing associate at Morningstar, Inc.
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--light">
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--network">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=3" alt="alt text" width="272" height="320">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--odd-light">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--light" data-alumni-carousel-link-index="3" href="">
Alyssa Thomas<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--light">
Neighborhood planner, City of Cambridge
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--light">
Neighborhood planner, City of Cambridge
</p>
</div>
</div>
</div>
<div class="alumni-feature-component__carousel-item js-alumni-carousel-item">
<div class="alumni-carousel-item
alumni-carousel-item--network">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=4" alt="alt text" width="272" height="320">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--even-light">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--light" data-alumni-carousel-link-index="4" href="">
Ana Mendoza<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--light">
Project manager at WeWork
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--light">
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--network">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=5" alt="alt text" width="272" height="320">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--odd-light">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--light" data-alumni-carousel-link-index="5" href="">
Aarav Pujari<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--light">
Marketing associate at Morningstar, Inc.
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--light">
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--network">
<div class="alumni-carousel-item__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/272/320?random=6" alt="alt text" width="272" height="320">
</figure>
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--even-light">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--light" data-alumni-carousel-link-index="6" href="">
Alyssa Thomas<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--light">
Neighborhood planner, City of Cambridge
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--light">
BAUP 2014
</p>
</div>
</div>
</div>
</div>
<div class="alumni-feature-component__button">
<a href="#" class="standard-button standard-button--network 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 more alumni</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>
{% if is_wordpress %}
{{ enqueue_script('alumni-feature-component') }}
{% endif %}
<div class="alumni-feature-component js-alumni-feature-component alumni-feature-component--{{ siteUnit }} alumni-feature-component--{{ componentSpacing }}">
<div class="alumni-feature-component__top">
{% if component.header|default and (component.header|trim) %}
<h2 class="alumni-feature-component__header alumni-feature-component__header--{{ background }} {{ isOnFullWidthPage ? 'alumni-feature-component__header--strong' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
<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">
{% include "bits/icons/left-chevron.twig" %}
</button>
<button class="alumni-feature-component__control-button-next js-alumni-next-button" type="button" aria-label="Move carousel items to the left">
{% include "bits/icons/right-chevron.twig" %}
</button>
</div>
</div>
<div class="alumni-feature-component__carousel js-alumni-carousel">
{% if isOnFullWidthPage %}
<div class="alumni-feature-component__background"></div>
{% endif %}
{% for alumnus in component.alumni %}
{% set parity = loop.index % 2 == 0 ? 'even' : 'odd' %}
<div class="alumni-feature-component__carousel-item js-alumni-carousel-item">
{% include 'partials/alumni-carousel-item/alumni-carousel-item.twig' with {
background: background,
parity: parity,
image: alumnus.image,
name: alumnus.name,
title: alumnus.title,
url: alumnus.url,
graduationClass: alumnus.graduationClass,
isOnFullWidthPage: isOnFullWidthPage,
} %}
</div>
{% endfor %}
</div>
<div class="alumni-feature-component__button">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
url: component.callToAction.url,
text: component.callToAction.text,
icon: 'right-chevron',
width: isOnFullWidthPage ? '' : 'full',
}
} %}
</div>
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "alumni-feature",
"header": "Optional header for the alumni feature component",
"alumni": [
{
"image": {
"src": "https://picsum.photos/272/320?random=1",
"altText": "alt text"
},
"name": "Ana Mendoza",
"title": "Project manager at WeWork",
"graduationClass": "MUP 2017"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=2",
"altText": "alt text"
},
"name": "Aarav Pujari",
"title": "Marketing associate at Morningstar, Inc.",
"graduationClass": "BAUP 2014"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=3",
"altText": "alt text"
},
"name": "Alyssa Thomas",
"title": "Neighborhood planner, City of Cambridge",
"graduationClass": "Neighborhood planner, City of Cambridge"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=4",
"altText": "alt text"
},
"name": "Ana Mendoza",
"title": "Project manager at WeWork",
"graduationClass": "MUP 2017"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=5",
"altText": "alt text"
},
"name": "Aarav Pujari",
"title": "Marketing associate at Morningstar, Inc.",
"graduationClass": "BAUP 2014"
},
{
"image": {
"src": "https://picsum.photos/272/320?random=6",
"altText": "alt text"
},
"name": "Alyssa Thomas",
"title": "Neighborhood planner, City of Cambridge",
"graduationClass": "BAUP 2014"
}
],
"callToAction": {
"text": "Meet more alumni",
"url": "#"
}
}
}
.alumni-feature-component
--alumniFeatureControlsColor illiniOrange
--alumniFeatureIconFillColor illiniOrange
--alumniFeatureIconFillColorActive white
&--arch
--alumniFeatureControlsColor industrialBlue
--alumniFeatureIconFillColor industrialBlue
--alumniFeatureIconFillColorActive white
&--art
--alumniFeatureControlsColor archesBlue
--alumniFeatureIconFillColor archesBlue
--alumniFeatureIconFillColorActive white
&--college
--alumniFeatureControlsColor illiniOrange
--alumniFeatureIconFillColor illiniOrange
--alumniFeatureIconFillColorActive illiniBlue
&--dance
--alumniFeatureControlsColor archesBlue
--alumniFeatureIconFillColor archesBlue
--alumniFeatureIconFillColorActive white
&--durp
--alumniFeatureControlsColor illiniOrange
--alumniFeatureIconFillColor illiniOrange
--alumniFeatureIconFillColorActive white
&--landarch
--alumniFeatureControlsColor illiniOrange
--alumniFeatureIconFillColor illiniOrange
--alumniFeatureIconFillColorActive black
&--theatre
--alumniFeatureControlsColor illiniOrange
--alumniFeatureIconFillColor illiniOrange
--alumniFeatureIconFillColorActive illiniBlue
&--music
--alumniFeatureControlsColor illiniOrange
--alumniFeatureIconFillColor illiniOrange
--alumniFeatureIconFillColorActive illiniBlue
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
&__top
+above(largeDeviceBreakpoint)
align-items flex-end
display flex
justify-content space-between
&__header
@extends $headline1
margin-bottom 24px
+above(largeDeviceBreakpoint)
margin-right 64px
&&--strong
tertiaryTitle()
& ~ ^[0]__controls
&
+above(largeDeviceBreakpoint)
margin-bottom 48px
&__controls
display flex
margin-bottom 24px
&__control-button-previous
&__control-button-next
border solid 2px var(--alumniFeatureControlsColor)
border-radius 50%
cursor pointer
height 48px
width 48px
& svg
& .left-chevron__shape
& .right-chevron__shape
fill var(--alumniFeatureIconFillColor)
&:first-child
margin-right 16px
&:focus
&:hover
background-color var(--alumniFeatureControlsColor)
& ._mark
fill var(--alumniFeatureIconFillColorActive)
& > svg
height 16px
width 8px
&__control-button-previous > svg
margin-right 4px
margin-top 3px
&__control-button-next > svg
margin-left 4px
margin-top 3px
&__carousel
display flex
margin-bottom 32px
position relative
transition transform 0.3s ease
&__background
height 200vh
width 200vw
position absolute
top 354px
background-color cloudDark
left -50vw
+above(largeDeviceBreakpoint)
top 431px
&__carousel-item
flex-shrink 0
opacity 1
position relative
transition opacity 0.3s ease
&__button
position relative
There are no notes for this item.