<div class="cta">
<div class="cta__archway">
<svg fill="none" viewBox="0 0 2164 128" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 128C341.38 45.725 704.885 2.667 1082 2.667c377.12 0 740.62 43.058 1082 125.333V0H0v128z" fill="#13294B"/>
</svg>
</div>
<div class="cta__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source srcset="https://picsum.photos/632/424?random=1 840w, https://picsum.photos/632/424?random=1 1680w" sizes="(max-width:840px) 840px,
1680px" type="image/webp">
<img class="captioned-image__image" loading="lazy" src="https://picsum.photos/632/424?random=1" alt="" width="1680" height="1120">
</picture>
</figure>
<div class="cta__image-overlay"></div>
</div>
<div class="cta__circles-container">
<div class="cta__circle cta__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--cta-circle1"
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="cta-circle1"
cx="0" cy="0" r="550" stroke="#FF552E" stroke-width="2"
data-spotlight-circle-id="cta-circle1"
data-spotlight-circle-animation="animation7"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<div class="cta__circle cta__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--cta-circle2"
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="cta-circle2"
cx="0" cy="0" r="550" stroke="#FF552E" stroke-width="2"
data-spotlight-circle-id="cta-circle2"
data-spotlight-circle-animation="animation8"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
<div class="cta__circle cta__circle--three">
<svg class="spotlight-circle__container spotlight-circle spotlight-circle--arches-blue" data-spotlight-circle xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 960">
<path class="spotlight-circle__path" id="path--cta-circle3"
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="cta-circle3"
cx="0" cy="0" r="550" stroke="#FF552E" stroke-width="2"
data-spotlight-circle-id="cta-circle3"
data-spotlight-circle-animation="animation9"
data-spotlight-circle-duration="2s"
data-spotlight-circle-show-path="false"
>
</circle>
</svg>
</div>
</div>
<div class="cta__content-container">
<div class="cta__heading-container" data-sal="slide-up" data-sal-duration="400" data-sal-easing="ease-out-quint">
<div class="cta__heading">
We've got your back.
</div>
<div class="cta__description cta__description--large" data-sal="slide-up" data-sal-duration="400" data-sal-delay="1200" data-sal-easing="ease-out-quint">
Take the next step to further your passion, empower yourself with practical skills, and explore your professional theatre career now. We can't wait to have you here.
</div>
<div class="cta__button-container cta__button-container--large">
<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">Apply</span></span>
</div>
</a>
<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">Contact Us</span></span>
</div>
</a>
</div>
</div>
</div>
<div class="cta__mobile-content-container">
<div class="cta__button-container cta__button-container--mobile">
<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">Apply</span></span>
</div>
</a>
<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">Contact Us</span></span>
</div>
</a>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="cta">
<div class="cta__archway">
{% include 'bits/archway/archway.twig' %}
</div>
<div class="cta__image-container">
<figure class="captioned-image">
<picture class="captioned-image__picture">
<source
srcset="{{ cta.image.src|towebp|resize(840, 560) }} 840w, {{ cta.image.src|towebp|resize(1680, 1120) }} 1680w"
sizes="(max-width:840px) 840px,
1680px"
type="image/webp"
>
<img class="captioned-image__image" loading="lazy" src="{{ cta.image.src|towebp|resize(840) }}" alt="{{ cta.image.altText | escape }}" width="1680" height="1120">
</picture>
</figure>
<div class="cta__image-overlay"></div>
</div>
<div class="cta__circles-container">
<div class="cta__circle cta__circle--one">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation7',
color: 'illini-orange',
duration: '2s',
id: 'cta-circle1',
size: '550',
stroke: '2',
viewBoxWidth: '2560',
viewBoxHeight: '960',
} %}
</div>
<div class="cta__circle cta__circle--two">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation8',
color: 'heritage-orange',
duration: '2s',
id: 'cta-circle2',
size: '550',
stroke: '2',
viewBoxWidth: '2560',
viewBoxHeight: '960',
} %}
</div>
<div class="cta__circle cta__circle--three">
{% include 'bits/spotlight-circle/spotlight-circle.twig' with {
animation: 'animation9',
color: 'arches-blue',
duration: '2s',
id: 'cta-circle3',
size: '550',
stroke: '2',
viewBoxWidth: '2560',
viewBoxHeight: '960',
} %}
</div>
</div>
<div class="cta__content-container">
<div class="cta__heading-container"
data-sal="slide-up"
data-sal-duration="400"
data-sal-easing="ease-out-quint">
<div class="cta__heading">
{{ cta.heading }}
</div>
<div class="cta__description cta__description--large"
data-sal="slide-up"
data-sal-duration="400"
data-sal-delay="1200"
data-sal-easing="ease-out-quint">
{{ cta.description | raw }}
</div>
<div class="cta__button-container cta__button-container--large">
{% for cta in cta.ctas %}
{% include 'bits/standard-button/standard-button.twig' with {
background: 'dark',
button: {
text: cta.text,
url: cta.link,
type: 'primary',
}
} %}
{% endfor %}
</div>
</div>
</div>
<div class="cta__mobile-content-container">
<div class="cta__button-container cta__button-container--mobile">
{% for cta in cta.ctas %}
{% include 'bits/standard-button/standard-button.twig' with {
background: 'dark',
button: {
text: cta.text,
url: cta.link,
type: 'primary',
}
} %}
{% endfor %}
</div>
</div>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "light",
"cta": {
"heading": "We've got your back.",
"description": "Take the next step to further your passion, empower yourself with practical skills, and explore your professional theatre career now. We can't wait to have you here.",
"image": {
"src": "https://picsum.photos/632/424?random=1",
"alt": "Alt text"
},
"ctas": [
{
"text": "Apply",
"link": "#"
},
{
"text": "Contact Us",
"link": "#"
}
]
},
"variants": [
{
"name": "5 ctas",
"context": {
"ctas": [
{
"text": "Apply",
"link": "#"
},
{
"text": "Contact Us",
"link": "#"
},
{
"text": "Why theatre at Illinois?",
"link": "#"
},
{
"text": "Learn more",
"link": "#"
},
{
"text": "Click here",
"link": "#"
}
]
}
}
]
}
.cta
background-color illiniBlueDark
fluid(padding-bottom, 500px, maxContentWidth, 200px, 180px)
position relative
&__archway
left 0
position absolute
top 0
width 100vw
z-index 1
& svg
height 100%
max-height 128px
width 100%
&__image-container
background linear-gradient(180deg, illiniBlue 0%, illiniBlueDark 100%)
position relative
&__image
height auto
mix-blend-mode lighten
position relative
width 100%
&__image-overlay
&:after
content ""
background linear-gradient(180deg, rgba(10,27,52,0), illiniBlueDark)
bottom 0
height 75%
left 0
position absolute
width 100vw
&__circles-container
bottom 0
left 0
position absolute
right 0
top 0
+above(largeDeviceBreakpoint)
bottom 25%
top 25%
&__content-container
@extends $contentContainer
align-items center
bottom 0
display flex
flex-direction column
justify-content center
left 0
position absolute
right 0
top 0
+above(500px)
width 66%
&__heading
@extends $billboardTitle
color white
+below(maxContentWidth)
fluid(margin-top, 320px, largeDeviceBreakpoint, 40%, 10%)
&__button-container
&--large
+below(maxContentWidth)
display none
&--mobile
+below(maxContentWidth)
display block
&__circle
bottom 0
left 0
position absolute
right 0
top 0
z-index 1
&__description
@extends $headline3
color white
margin-bottom 32px
margin-top 24px
& em
font-style italic
&__heading
&__description
&__button-container
position relative
text-align center
z-index 2
&__mobile-content-container
@extends $contentContainer
background illiniBlueDark
fluid(padding-bottom, 500px, maxContentWidth, 96px, 176px)
position relative
fluid(top, 500px, maxContentWidth, 250px, 200px)
+above(maxContentWidth)
display none
.cta__circles-container .cta__circle .spotlight-circle__container circle.spotlight-circle__shape.spotlight-circle__shape--animated
stroke-width 0.25em
+below(maxContentWidth)
r 800
stroke-width 0.5em
There are no notes for this item.