<div class="faculty-section">
<div class="faculty-section__image-container">
<div class="faculty-section__circle faculty-section__circle--one">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--illini-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 960">
<path class="spotlight-circle__path" id="path--faculty-circle-1"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="faculty-circle-1"
cx="0" cy="0" r="880" stroke="#FF552E" stroke-width="3"
data-spotlight-circle-id="faculty-circle-1"
data-spotlight-circle-animation="animation7"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<div class="faculty-section__circle faculty-section__circle--two">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--heritage-orange" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 960">
<path class="spotlight-circle__path" id="path--faculty-circle-2"
fill="none" stroke="none"
stroke-miterlimit="10" stroke-width="4" stroke-dasharray="10 20.1" data-spotlight-circle-path
/>
<circle class="spotlight-circle__shape" id="faculty-circle-2"
cx="0" cy="0" r="880" stroke="#FF552E" stroke-width="3"
data-spotlight-circle-id="faculty-circle-2"
data-spotlight-circle-animation="animation9"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<div class="faculty-section__image">
<div class="faculty-section__image-overlay"></div>
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/784/480?random=1 784w " sizes="100vw" type="image/webp">
<source srcset="https://picsum.photos/784/480?random=1 784w " sizes="100vw" type="image/jpeg">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/784/480?random=1" alt="featured image">
</picture>
</figure>
</div>
<svg class="faculty-section__mask-svg" preserveAspectRatio="none" viewBox="0 0 1648 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="faculty-section__mask" d="M0 0C259.979 61.7061 536.807 94 824 94C1111.19 94 1388.02 61.7061 1648 0V96H0L0 0Z" fill="#00D02E"/>
</svg>
</div>
<div class="faculty-section__card-container">
<div class="faculty-section__card">
<h2 class="faculty-section__heading">
Work with the best
</h2>
<div class="faculty-section__description">
At Illinois Theatre, our faculty are also industry professionals, and you won't just learn from them—you'll work alongside them to create incredible theatre experiences.
</div>
<div class="faculty-section__cta">
<a href="#" class="standard-button standard-button--theatre 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">Meet our faculty</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 class="faculty-section">
<div class="faculty-section__image-container">
<div class="faculty-section__circle faculty-section__circle--one">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation7',
color: 'illini-orange',
duration: '2s',
id: 'faculty-circle-1',
size: '880',
stroke: '3',
viewBoxWidth: '2560',
viewBoxHeight: '960',
} %}
</div>
<div class="faculty-section__circle faculty-section__circle--two">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation9',
color: 'heritage-orange',
duration: '2s',
id: 'faculty-circle-2',
size: '880',
stroke: '3',
viewBoxWidth: '2560',
viewBoxHeight: '960',
} %}
</div>
<div class="faculty-section__image">
<div class="faculty-section__image-overlay"></div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
{{ imageMacros.createAlwaysFullWidth(faculty.image, 784, 480, background) }}
</div>
<svg class="faculty-section__mask-svg" preserveAspectRatio="none" viewBox="0 0 1648 96" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="faculty-section__mask" d="M0 0C259.979 61.7061 536.807 94 824 94C1111.19 94 1388.02 61.7061 1648 0V96H0L0 0Z" fill="#00D02E"/>
</svg>
</div>
<div class="faculty-section__card-container">
<div class="faculty-section__card">
<h2 class="faculty-section__heading">
{{ faculty.heading }}
</h2>
<div class="faculty-section__description">
{{ faculty.description }}
</div>
<div class="faculty-section__cta">
{% include 'bits/standard-button/standard-button.twig' with {
background: 'dark',
button: {
text: faculty.cta.text,
url: faculty.cta.link,
type: 'primary',
icon: "right-chevron",
}
} %}
</div>
</div>
</div>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "dark",
"faculty": {
"heading": "Work with the best",
"description": "At Illinois Theatre, our faculty are also industry professionals, and you won't just learn from them—you'll work alongside them to create incredible theatre experiences.",
"image": {
"src": "https://picsum.photos/784/480?random=1",
"altText": "featured image"
},
"cta": {
"link": "#",
"text": "Meet our faculty"
}
}
}
largeBreakpoint = 1000px
.faculty-section
background-color illiniBlue
position relative
&__image-container
position relative
&__image
position relative
&__image-overlay
background-color illiniBlue
mix-blend-mode lighten
position absolute 0
&__circle
position absolute
top 0
left 0
bottom 0
right 0
&--one
&--two
margin-top -48px
&__card-container
align-items flex-end
display flex
justify-content center
margin-top -23vw
position relative
z-index 2
+above(largeBreakpoint)
@extends $contentContainer
bottom 14vw
justify-content flex-end
left 0
margin-top 0
position absolute
right 0
top 0
&__card
background-color illiniBlueDark
border-radius 8px
margin 24px 24px 0 24px
max-width 512px
padding 32px 24px
position relative
text-align center
+above(largeBreakpoint)
margin 0
max-width 50%
padding 48px
&__mask-svg
max-height 128px
transform translateY(calc(-100% + 1px))
&__mask
fill illiniBlue
&__heading
@extend $secondaryTitle
color white
margin-bottom 16px
&__description
@extend $primaryParagraph
color white
&__cta
margin-top 32px
There are no notes for this item.