<div class="opportunities">
<div class="opportunities__section opportunities__section--first" data-sal="slide-up" data-sal-duration="400" data-sal-easing="ease-out-quint">
<div class="opportunities__container opportunities__container--image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/id/1005/1280/1066" alt="" width="632" height="424">
</figure>
</div>
<div class="opportunities__container opportunities__container--text opportunities__container--right-align">
<h2 class="opportunities__heading">Opportunities abound</h2>
<div class="opportunities__description opportunities__description--one">Hungry for experience? As a student, you'll be an integral part of our production season, with opportunities from Illinois Theatre, Lyric Theatre, the Department of Dance, and more. You'll put your classwork into action on real productions,
from readings to plays, musicals, and opera.</div>
<div class="opportunities__cta">
<a href="" class="standard-button standard-button--theatre 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">Explore our upcoming events</span></span>
</div>
</a>
</div>
</div>
</div>
<div class="opportunities__section opportunities__section--second" data-sal="slide-up" data-sal-duration="400" data-sal-easing="ease-out-quint">
<div class="opportunities__container opportunities__container--image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/id/101/1280/1066" alt="" width="632" height="424">
</figure>
</div>
<div class="opportunities__container opportunities__container--text">
<h2 class="opportunities__heading">World-class facilities</h2>
<div class="opportunities__description opportunities__description--two">You'll train and work in the Krannert Center for the Performing Arts, a 300,000 square-foot performing arts and academic facility. Krannert houses five indoor stages, and each venue is designed for a particular style of performance with a
fine-tuned blend of beauty and cutting-edge technology.</div>
<div class="opportunities__cta">
<a href="" class="standard-button standard-button--theatre 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">See more of the Krannert Center</span></span>
</div>
</a>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="opportunities">
<div class="opportunities__section opportunities__section--first"
data-sal="slide-up"
data-sal-duration="400"
data-sal-easing="ease-out-quint">
<div class="opportunities__container opportunities__container--image">
{{ imageMacros.create(opportunities.imageOne, 632, 424, background) }}
</div>
<div class="opportunities__container opportunities__container--text opportunities__container--right-align">
<h2 class="opportunities__heading">{{ opportunities.headingOne }}</h2>
<div class="opportunities__description opportunities__description--one">{{ opportunities.descriptionOne }}</div>
<div class="opportunities__cta">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: opportunities.textOne,
url: opportunities.pageLinkOne,
type: 'primary'
}
} %}
</div>
</div>
</div>
<div class="opportunities__section opportunities__section--second"
data-sal="slide-up"
data-sal-duration="400"
data-sal-easing="ease-out-quint">
<div class="opportunities__container opportunities__container--image">
{{ imageMacros.create(opportunities.imageTwo, 632, 424, background) }}
</div>
<div class="opportunities__container opportunities__container--text">
<h2 class="opportunities__heading">{{ opportunities.headingTwo }}</h2>
<div class="opportunities__description opportunities__description--two">{{ opportunities.descriptionTwo }}</div>
<div class="opportunities__cta">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: opportunities.textTwo,
url: opportunities.pageLinkTwo,
type: 'primary'
}
} %}
</div>
</div>
</div>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "light",
"opportunities": {
"headingOne": "Opportunities abound",
"descriptionOne": "Hungry for experience? As a student, you'll be an integral part of our production season, with opportunities from Illinois Theatre, Lyric Theatre, the Department of Dance, and more. You'll put your classwork into action on real productions, from readings to plays, musicals, and opera.",
"imageOne": {
"src": "https://picsum.photos/id/1005/1280/1066",
"alt": "Alt text"
},
"textOne": "Explore our upcoming events",
"headingTwo": "World-class facilities",
"descriptionTwo": "You'll train and work in the Krannert Center for the Performing Arts, a 300,000 square-foot performing arts and academic facility. Krannert houses five indoor stages, and each venue is designed for a particular style of performance with a fine-tuned blend of beauty and cutting-edge technology.",
"imageTwo": {
"src": "https://picsum.photos/id/101/1280/1066",
"alt": "Alt text"
},
"textTwo": "See more of the Krannert Center"
}
}
.opportunities
@extends $contentContainer
margin-bottom 80px
margin-top 120px
+above(largeDeviceBreakpoint)
margin-bottom 160px
margin-top 128px
&__section
align-content center
display grid
grid-gap 32px
grid-template-columns 100%
grid-template-rows 1fr
margin-bottom 96px
position relative
+above(largeDeviceBreakpoint)
grid-gap 64px
grid-template-columns 1fr 1fr
position relative
width 100%
&__container
align-self center
+below(largeDeviceBreakpoint)
text-align center
&--right-align
+above(largeDeviceBreakpoint)
order -1
text-align end
&__heading
@extends $secondaryTitle
margin-bottom 16px
&__description
@extends $primaryParagraph
margin-bottom 32px
&--one
text-align end
+below(largeDeviceBreakpoint)
text-align center
There are no notes for this item.