<div class="alumni-section">
<h2 class="alumni-section__heading">
Join our celebrated alumni network
</h2>
<div class="alumni-section__description">
Our alumni are extensions of our unique creative community, using their skills in professional settings—from theatres to boardrooms.
</div>
<div class="alumni-section__carousel">
<div class="alumni-carousel" data-embla-carousel>
<div class="alumni-carousel__controls">
<button class="alumni-carousel__previous-button" type="button" aria-label="Move carousel items to the right" data-embla-previous-button>
<div class="alumni-carousel__previous-button-icon">
<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>
</div>
</button>
<button class="alumni-carousel__next-button" type="button" aria-label="Move carousel items to the left" data-embla-next-button>
<div class="alumni-carousel__next-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>
</div>
</button>
</div>
<div class="alumni-carousel__viewport" data-embla-viewport>
<div class="alumni-carousel__container">
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="100" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="200" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nickolas David Offerman
</h3>
<p class="alumni-card__title">
Lecturer in Theater and Berlind Playwright-in-Residence at Princeton University
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="300" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
N. D. Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nicky O.
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nick Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
<div class="alumni-carousel__item" data-sal="slide-up" data-sal-duration="400" data-sal-delay="400" data-sal-easing="ease-out-quint">
<div class="alumi-card">
<div class="alumni-card__image">
<div class="alumni-card__image-overlay"></div>
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/320/400?random=1" alt="featured image" width="320" height="400">
</figure>
</div>
<a href="" class="alumni-card__text">
<h3 class="alumni-card__name">
Nickolas David Offerman
</h3>
<p class="alumni-card__title">
Actor
</p>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
<script>
const rootNode = document.querySelector('[data-embla-carousel]')
const viewportNode = rootNode.querySelector('[data-embla-viewport]')
const prevButtonNode = rootNode.querySelector('[data-embla-previous-button]')
const nextButtonNode = rootNode.querySelector('[data-embla-next-button]')
const options = {
loop: false,
align: 'start',
containScroll: 'keepSnaps'
}
const embla = EmblaCarousel(viewportNode, options)
prevButtonNode.addEventListener('click', embla.scrollPrev, false)
nextButtonNode.addEventListener('click', embla.scrollNext, false)
</script>
</div>
</div>
<div class="alumni-section">
<h2 class="alumni-section__heading">
{{ alumni.heading }}
</h2>
<div class="alumni-section__description">
{{ alumni.description }}
</div>
<div class="alumni-section__carousel">
{% include 'partials/homepages/theatre/alumni/carousel/carousel.twig' with {
alumns: alumni.alumns
} %}
</div>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "light",
"alumni": {
"background": "dark",
"heading": "Join our celebrated alumni network",
"description": "Our alumni are extensions of our unique creative community, using their skills in professional settings—from theatres to boardrooms.",
"alumns": [
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nickolas David Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Lecturer in Theater and Berlind Playwright-in-Residence at Princeton University"
},
{
"name": "N. D. Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nicky O.",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nick Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
},
{
"name": "Nickolas David Offerman",
"permalink": "#",
"image": {
"src": "https://picsum.photos/320/400?random=1",
"altText": "featured image"
},
"title": "Actor"
}
]
}
}
.alumni-section
background-color illiniBlue
fluid(padding-top padding-bottom, 320px, 1200px, 128px, 176px)
&__heading
&__description
color white
margin 0 auto
max-width 880px
padding 0 16px
text-align center
+above(896px)
padding 0 0
&__heading
@extends $secondaryTitle
&__description
@extends $primaryParagraph
margin-top 16px
&__carousel
@extends $contentContainer
+above(1480px)
margin-top 64px
There are no notes for this item.