<div class="programs" data-programs>
<div class="programs__archway programs__archway--top">
<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="programs__content">
<h2 class="programs__heading">Programs section</h2>
<nav id="programs-navigation" class="programs__navigation">
<ul class="programs__nav-buttons">
<li class="programs__nav-button programs__nav-button--undergraduate" data-degree-button-is-active="true" data-programs-button="undergraduate">
<button type="" class="standard-button standard-button--theatre standard-button--light
standard-button---width standard-button--">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Undergraduate</span></span></div> </button>
</li>
<li class="programs__nav-button programs__nav-button--graduate" data-degree-button-is-active="false" data-programs-button="graduate">
<button type="" class="standard-button standard-button--theatre standard-button--light
standard-button---width standard-button--">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">Graduate</span></span></div> </button>
</li>
<li class="programs__nav-button programs__nav-button--all">
<a href="" class="standard-button standard-button--theatre standard-button--light
standard-button---width standard-button--">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">See all programs</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>
</li>
</ul>
</nav>
<div class="programs__programs">
<div class="programs__degree programs__degree--undergraduate" data-degree="undergraduate" data-degree-is-active="true">
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=91);">
<div class="programs__inner-program">
<div class="programs__program-text">
Super long title my dude
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=5);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 3
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=3);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 62
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=18);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 84
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=46);">
<div class="programs__inner-program">
<div class="programs__program-text">
Reallybigword ok
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=2);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 38
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=24);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 59
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=65);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 25
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=47);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 65
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=81);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 75
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=46);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 85
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=13);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 86
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=31);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 48
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=53);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 96
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=6);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 52
</div>
</div>
</a>
<a class="programs__program programs__program--undergraduate" href="https://google.com" data-program="undergraduate" style="background-image: url(https://picsum.photos/403/304?random=13);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 89
</div>
</div>
</a>
</div>
<div class="programs__degree programs__degree--graduate" data-degree="graduate" data-degree-is-active="false">
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=22);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 7
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=70);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 73
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=34);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 91
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=4);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 57
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=28);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 9
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=0);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 47
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=77);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 22
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=93);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 59
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=67);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 8
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=90);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 64
</div>
</div>
</a>
<a class="programs__program programs__program--graduate" href="https://google.com" data-program="graduate" style="background-image: url(https://picsum.photos/403/304?random=99);">
<div class="programs__inner-program">
<div class="programs__program-text">
Program 0
</div>
</div>
</a>
</div>
</div>
</div>
<div class="programs__archway programs__archway--bottom">
<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>
{% set degrees = ['undergraduate', 'graduate'] %}
<div class="programs" data-programs>
<div class="programs__archway programs__archway--top">
{% include 'bits/archway/archway.twig' %}
</div>
<div class="programs__content">
<h2 class="programs__heading">{{ programs.heading }}</h2>
<nav id="programs-navigation" class="programs__navigation">
<ul class="programs__nav-buttons">
{% for degree in degrees %}
<li
class="programs__nav-button programs__nav-button--{{ degree }}"
data-degree-button-is-active="{{ loop.first ? 'true' : 'false' }}"
data-programs-button="{{ degree }}">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
isButton: true,
text: degree | capitalize,
}
} %}
</li>
{% endfor %}
<li class="programs__nav-button programs__nav-button--all">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: programs.allProgramsLink.text,
url: programs.allProgramsLink.link,
icon: 'right-chevron'
}
} %}
</li>
</ul>
</nav>
<div class="programs__programs">
{% for degree in degrees %}
<div class="programs__degree programs__degree--{{ degree }}" data-degree="{{ degree }}" data-degree-is-active="{{ loop.first ? 'true' : 'false'}}">
{% for program in programs[degree~'Programs'] %}
<a
class="programs__program programs__program--{{ degree }}"
href="{{ program.pageLink.url }}"
data-program="{{ degree }}"
style="background-image: url({{ program.backgroundImage | tojpg | resize(403, 304) }});">
<div class="programs__inner-program">
<div class="programs__program-text">
{{ program.programTitle }}
</div>
</div>
</a>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div class="programs__archway programs__archway--bottom">
{% include 'bits/archway/archway.twig' %}
</div>
</div>
{
"siteUnit": "theatre",
"departmentName": "Theatre",
"background": "light",
"programs": {
"siteUnit": "theatre",
"heading": "Programs section",
"allProgramsLink": {
"text": "See all programs",
"url": "https://google.com"
},
"undergraduatePrograms": [
{
"programTitle": "Super long title my dude",
"backgroundImage": "https://picsum.photos/403/304?random=91",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 3",
"backgroundImage": "https://picsum.photos/403/304?random=5",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 62",
"backgroundImage": "https://picsum.photos/403/304?random=3",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 84",
"backgroundImage": "https://picsum.photos/403/304?random=18",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Reallybigword ok",
"backgroundImage": "https://picsum.photos/403/304?random=46",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 38",
"backgroundImage": "https://picsum.photos/403/304?random=2",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 59",
"backgroundImage": "https://picsum.photos/403/304?random=24",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 25",
"backgroundImage": "https://picsum.photos/403/304?random=65",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 65",
"backgroundImage": "https://picsum.photos/403/304?random=47",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 75",
"backgroundImage": "https://picsum.photos/403/304?random=81",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 85",
"backgroundImage": "https://picsum.photos/403/304?random=46",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 86",
"backgroundImage": "https://picsum.photos/403/304?random=13",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 48",
"backgroundImage": "https://picsum.photos/403/304?random=31",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 96",
"backgroundImage": "https://picsum.photos/403/304?random=53",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 52",
"backgroundImage": "https://picsum.photos/403/304?random=6",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 89",
"backgroundImage": "https://picsum.photos/403/304?random=13",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
}
],
"graduatePrograms": [
{
"programTitle": "Program 7",
"backgroundImage": "https://picsum.photos/403/304?random=22",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 73",
"backgroundImage": "https://picsum.photos/403/304?random=70",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 91",
"backgroundImage": "https://picsum.photos/403/304?random=34",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 57",
"backgroundImage": "https://picsum.photos/403/304?random=4",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 9",
"backgroundImage": "https://picsum.photos/403/304?random=28",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 47",
"backgroundImage": "https://picsum.photos/403/304?random=0",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 22",
"backgroundImage": "https://picsum.photos/403/304?random=77",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 59",
"backgroundImage": "https://picsum.photos/403/304?random=93",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 8",
"backgroundImage": "https://picsum.photos/403/304?random=67",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 64",
"backgroundImage": "https://picsum.photos/403/304?random=90",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 0",
"backgroundImage": "https://picsum.photos/403/304?random=99",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
}
],
"phdPrograms": [
{
"programTitle": "Program 77",
"backgroundImage": "https://picsum.photos/403/304?random=75",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 71",
"backgroundImage": "https://picsum.photos/403/304?random=75",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 96",
"backgroundImage": "https://picsum.photos/403/304?random=94",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 60",
"backgroundImage": "https://picsum.photos/403/304?random=83",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 0",
"backgroundImage": "https://picsum.photos/403/304?random=98",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 7",
"backgroundImage": "https://picsum.photos/403/304?random=61",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 33",
"backgroundImage": "https://picsum.photos/403/304?random=24",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 51",
"backgroundImage": "https://picsum.photos/403/304?random=20",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 21",
"backgroundImage": "https://picsum.photos/403/304?random=7",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
},
{
"programTitle": "Program 3",
"backgroundImage": "https://picsum.photos/403/304?random=34",
"pageLink": {
"text": "Text",
"url": "https://google.com"
}
}
]
}
}
.programs
@keyframes fadeIn
0%
opacity 0
100%
opacity 1
margin-top -1px
position relative
width 100%
&__content
background-color illiniBlue
position relative
fluid('padding-top',
460px,
2560px,
96px,
208px
)
fluid('padding-bottom',
460px,
2560px,
96px,
208px
)
&__archway
height 100%
left 0
position relative
width 100vw
&--top
background-color illiniBlueDark
margin-bottom -1px
transform rotate(180deg)
& svg
position relative
top -1px
&--bottom
bottom 0
&__heading
@extends $contentContainer
@extends $billboardTitle
color white
text-align center
&__programs
contentContainer()
max-width maxContentWidth + 48px
padding-left 24px
padding-right 24px
margin 0 auto
width 100%
+above(1800px)
max-width 2560px
width 100vw
&__navigation
@extends $contentContainer
margin-top 40px
margin-bottom 40px
+above(mediumDeviceBreakpoint)
margin-top 40px
margin-bottom 56px
&__nav-buttons
margin 0 auto
text-align center
&__nav-button
--navBackgroundColor illiniOrange
&--graduate
--navBackgroundColor heritageOrange
&--phd
--navBackgroundColor archesBlue
display inline-block
margin 8px
& > .standard-button
cursor pointer
border solid 2px var(--navBackgroundColor)
border-radius 24px
color white
background-color transparent
& path
fill illiniOrange !important
&:hover
color illiniBlue
background-color var(--navBackgroundColor)
& path
fill illiniBlue !important
&[data-degree-button-is-active="true"]
& > .standard-button
color illiniBlue
background-color var(--navBackgroundColor)
&__degree
align-items center
transition all 200ms ease-in-out
display none
flex-wrap wrap
gap 16px
height 100%
justify-content center
&[data-degree-is-active="true"]
display flex
for num in (1..20)
&[data-degree-is-active="true"] .programs__program:nth-of-type({num})
opacity 0
animation fadeIn 300ms ease-in-out forwards
animation-delay (num * 70)ms
&__program
--programColor illiniOrange
&--graduate
--programColor heritageOrange
&--phd
--programColor archesBlue
align-items center
background-color illiniBlue
background-blend-mode lighten
border-radius 8px
display flex
height 256px
justify-content center
position relative
text-decoration none
width 336px
&:after
background-color illiniBlue
content ''
left 0
opacity 0.8
position absolute
height 100%
top 0
transition opacity 200ms ease-in-out
width 100%
&:hover
&:after
opacity 0
+above(600px)
height 240px
width 320px
&__inner-program
align-items center
border solid 2px var(--programColor)
border-radius 8px
display flex
height calc(100% - 16px)
justify-content center
transition all 200ms ease-in-out
width calc(100% - 16px)
z-index 1
&__program-text
@extends $primaryLead
background-color transparent
color white
transition all 200ms ease-in-out
text-align center
margin 16px
+above(largeDeviceBreakpoint)
margin 24px
&__program:hover &__program-text
background-color var(--programColor)
color illiniBlue
&__program:hover &__inner-program
height 100%
width 100%
There are no notes for this item.