<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--even-light">
<a class="alumni-carousel-item__link
alumni-carousel-item__link--light" data-alumni-carousel-link-index="" href="">
<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>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="alumni-carousel-item {{ isOnFullWidthPage ? 'alumni-carousel-item--full'}}
alumni-carousel-item--{{ siteUnit }}">
<div class="alumni-carousel-item__image">
{% if isOnFullWidthPage %}
{{ imageMacros.create(image, 332, 432, background) }}
{% else %}
{{ imageMacros.create(image, 272, 320, background) }}
{% endif %}
</div>
<div class="alumni-carousel-item__content alumni-carousel-item__content--{{ parity }}-{{ background }}">
<a class="alumni-carousel-item__link
{{ isOnFullWidthPage ? 'alumni-carousel-item__link--full'}}
alumni-carousel-item__link--{{ background }}"
data-alumni-carousel-link-index="{{ loop.index }}"
href="{{ url }}">
{{ name | trim }}<span class="alumni-carousel-item__link-icon"> {% include "bits/icons/right-chevron.twig" %}</span>
</a>
<p class="alumni-carousel-item__title {{ isOnFullWidthPage ? 'alumni-carousel-item__title--full'}} alumni-carousel-item__title--{{ background }}">
{{ title }}
</p>
<p class="alumni-carousel-item__graduation-class alumni-carousel-item__graduation-class--{{ background }}">
{{ isOnFullWidthPage ? '' : 'Class of'}} {{ graduationClass }}
</p>
</div>
</div>
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"image": {
"src": "https://picsum.photos/272/320?random=1",
"altText": "alt text"
},
"firstName": "Ana",
"lastName": "Mendoza",
"title": "Project manager at WeWork",
"graduationClass": "MUP 2017",
"parity": "even"
}
.alumni-carousel-item
--alumniCarouselIconFillColor illiniOrange
--textColor charcoalLight
--textColorActive charcoalLight
&--arch
--alumniCarouselIconFillColor industrialBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--art
--alumniCarouselIconFillColor archesBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--dance
--alumniCarouselIconFillColor archesBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--durp
--alumniCarouselIconFillColor illiniOrange
--textColor charcoalLight
--textColorActive charcoalLight
&--theatre
--alumniCarouselIconFillColor illiniOrange
--textColor illiniBlue
--textColorActive illiniOrange
&--music
--alumniCarouselIconFillColor illiniOrange
--textColor illiniBlue
--textColorActive illiniOrange
width 272px
&--full
+above(largeDeviceBreakpoint)
width 332px
&__image
width 100%
&__content
padding 16px
&--odd-light
background-color cloud
&--even-light
background-color cloudDark
&--odd-dark
background-color charcoalLight
&--even-dark
background-color charcoalLighter
&__link
@extends $headline2
color var(--textColor)
display inline-block
margin-bottom 8px
text-decoration none
&:focus
&:hover
&:active
color var(--textColorActive)
& ^[0]__link-icon svg
transform translate(4px, 0)
&--dark
color white
&--full
headline2()
margin-bottom 16px
&__link-icon
display inline
white-space nowrap
& svg
transition all 0.3s
& .right-chevron__shape
fill var(--alumniCarouselIconFillColor)
&__title
@extends $headline3
font-size 20px
margin-bottom 4px
&--dark
color white
&--full
headline3()
&__graduation-class
@extends $secondaryParagraph
There are no notes for this item.