<div class="homepage-mission">
<div class="homepage-mission__container">
<div class="homepage-mission__introduction">
<div class="homepage-mission__hero">
<div class="homepage-mission__hero-spacer"></div>
<div class="homepage-mission__hero-image-container">
<img class="homepage-mission__hero-image" alt="home image" src="https://picsum.photos/880/628?random=1">
</div>
</div>
<div class="homepage-mission__headline-container">
<h1 class="homepage-mission__headline">
<span class="homepage-mission__headline-line">
<svg class="charcoal-light-line" xmlns="http://www.w3.org/2000/svg" width="48" height="4" viewBox="0 0 48 4" fill="none">
<rect width="48" height="4" fill="#363D44"/>
</svg>
</span> BUILDING THE FUTURE.
</h1>
</div>
</div>
<section class="homepage-mission__body-and-cta">
<div class="homepage-mission__body">
<div class="homepage-mission__body-spacer"></div>
<div class="homepage-mission__body-text
homepage-mission__body-text--grid ">
<p>Throughout history, architecture has been the framework for collective human experiences. As such, we approach teaching, research, design, and public engagement with a deep sense of shared responsibility.</p>
<p>As an Architecture student at Illinois, you'll gain a rigorous design and technical education. You'll address the planet's most pressing contemporary questions. And you'll make an untold impact on a complex and exciting future.</p>
</div>
</div>
<div class="homepage-mission__cta-link-container">
<div class="homepage-mission__body-spacer"></div>
<div class="homepage-mission__cta-link">
<a href="#" class="standard-button standard-button--arch 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 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>
</div>
</div>
</section>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="homepage-mission">
<div class="homepage-mission__container">
<div class="homepage-mission__introduction">
<div class="homepage-mission__hero">
<div class="homepage-mission__hero-spacer"></div>
<div class="homepage-mission__hero-image-container">
{% if mission.homeHeroImage | default %}
<img class="homepage-mission__hero-image" alt="{{ mission.homeHeroImage.alt | escape }}" src="{{ mission.homeHeroImage.src|resize(900)|towebp }}">
{% endif %}
</div>
</div>
<div class="homepage-mission__headline-container">
<h1 class="homepage-mission__headline">
<span class="homepage-mission__headline-line">
{% include 'bits/charcoal-light-line/charcoal-light-line.twig' %}
</span>
{{ mission.missionHeadline|upper }}
</h1>
</div>
</div>
<section class="homepage-mission__body-and-cta">
<div class="homepage-mission__body">
<div class="homepage-mission__body-spacer"></div>
<div class="homepage-mission__body-text
{{ (mission.missionBody | length > 250) ? 'homepage-mission__body-text--grid' : ''}} ">
{{ mission.missionBody|raw}}
</div>
</div>
<div class="homepage-mission__cta-link-container">
<div class="homepage-mission__body-spacer"></div>
<div class="homepage-mission__cta-link">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
icon: 'right-chevron',
text: mission.missionCta.text,
url: mission.missionCta.url,
type: 'primary',
isSubmit: false
}
} %}
</div>
</div>
</section>
</div>
</div>
{
"siteUnit": "arch",
"departmentName": "School of Architecture",
"background": "light",
"mission": {
"homeHeroImage": {
"src": "https://picsum.photos/880/628?random=1",
"alt": "home image"
},
"missionHeadline": "Building the future.",
"missionBody": "<p>Throughout history, architecture has been the framework for collective human experiences. As such, we approach teaching, research, design, and public engagement with a deep sense of shared responsibility.</p><p>As an Architecture student at Illinois, you'll gain a rigorous design and technical education. You'll address the planet's most pressing contemporary questions. And you'll make an untold impact on a complex and exciting future.</p>",
"missionCta": {
"text": "Explore our programs",
"url": "#"
}
}
}
.homepage-mission
breakpointLarge = 940px
breakpointSmall = 600px
background-color white
margin-bottom 80px
+above(breakpointSmall)
margin-bottom 96px
+above(breakpointLarge)
margin-bottom 144px
&__hero
width 100%
position relative
display flex
right 0
img
filter grayscale(1)
opacity 0.2
object-fit cover
object-position center
&__hero-image-container
height 348px
width 75%
+above(breakpointSmall)
height 468px
margin-top 32px
+above(breakpointLarge)
height 628px
margin-top 64px
width 67%
&__hero-image
width 100%
&__introduction
@extends $contentContainer
position relative
&__headline-container
align-items center
display flex
position absolute
bottom 48px
top 112px
+above(breakpointSmall)
bottom 64px
top 224px
width 75%
+above(breakpointLarge)
bottom 80px
top 288px
&__headline
@extends $billboardTitle
display block
letter-spacing 8px
margin-bottom 48px
width 90%
+above(breakpointLarge)
margin-bottom 64px
+above(1134px)
margin-bottom 80px
&__hero-spacer
&__body-spacer
&__cta-spacer
width 25%
+above(breakpointLarge)
width 33.3%
&__body-and-cta
@extends $contentContainer
width 100%
position relative
align-items flex-end
display flex
flex-direction column
margin-top -24px
+above(breakpointSmall)
margin-top -32px
+above(breakpointLarge)
margin-top -48px
&__body
border-left 4px solid charcoalLight
border-top 4px solid charcoalLight
display flex
position relative
padding-top 64px
+above(breakpointSmall)
padding-top 80px
+above(breakpointLarge)
padding-top 128px
&__body-and-cta::after
content ''
position absolute
top 0
right calc(-100vw + 48px)
height 100%
width 100vw
border-top 4px solid charcoalLight
border-bottom 4px solid charcoalLight
&__body-text
& p
@extends $primaryParagraph
&--grid
display grid
grid-template-columns 1fr
grid-gap 16px
width 75%
+above(breakpointLarge)
width 66%
grid-template-columns 1fr 1fr
&__cta-link-container
border-left 4px solid charcoalLight
border-bottom 4px solid charcoalLight
display flex
padding-bottom 48px
width 100%
+above(breakpointSmall)
padding-bottom 64px
+above(breakpointLarge)
padding-bottom 80px
&__cta-link
margin-top 32px
+above(breakpointLarge)
margin-top 48px
&__cta-link .standard-button--arch
+below(breakpointSmall - 1)
text-align left
There are no notes for this item.