<div class="homepage-faculty">
<div class="homepage-faculty__container">
<div class="homepage-faculty__box">
<div class="homepage-faculty__content">
<h2 class="homepage-faculty__header">
An extraordinary opportunity to build relationships
</h2>
<div class="homepage-faculty__body">
<p>Our program <a href="#">attracts people</a> who are passionate about what they do, and the size of our department makes it easy to bond with classmates and faculty. Members of our faculty are approachable both in and out of the classroom.
Join us for the holiday gathering in the Atrium, kickball on the South Quad, or potuck dinners at a faculty member’s house.</p>
</div>
<div class="homepage-faculty__cta">
<a href="#" class="standard-button standard-button--durp 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">Meet Planning at Illinois faculty</span><span class="standard-button__icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="8" height="16" viewBox="0 0 8 16"><path class="icon-fill" fill="#E84A27" 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 class="homepage-faculty__image">
<figure class="captioned-image">
<img class="captioned-image__image" src="https://picsum.photos/1000/480?random=1" alt="" width="960" height="480">
</figure>
</div>
</div>
</div>
</div>
{% import "bits/macros/imageSource.twig" as imageMacros %}
<div class="homepage-faculty">
<div class="homepage-faculty__container">
<div class="homepage-faculty__box">
<div class="homepage-faculty__content">
<h2 class="homepage-faculty__header">
{{ faculty.header }}
</h2>
<div class="homepage-faculty__body">
{{ faculty.body | raw }}
</div>
<div class="homepage-faculty__cta">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: 'internal-link',
text: faculty.link.text,
url: faculty.link.url,
width: regular,
}
} %}
</div>
</div>
<div class="homepage-faculty__image">
{{ imageMacros.create(faculty.image, 960, 480, background) }}
</div>
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "light",
"faculty": {
"header": "An extraordinary opportunity to build relationships",
"body": "<p>Our program <a href=\"#\">attracts people</a> who are passionate about what they do, and the size of our department makes it easy to bond with classmates and faculty. Members of our faculty are approachable both in and out of the classroom. Join us for the holiday gathering in the Atrium, kickball on the South Quad, or potuck dinners at a faculty member’s house.</p>",
"link": {
"text": "Meet Planning at Illinois faculty",
"url": "#"
},
"image": {
"src": "https://picsum.photos/1000/480?random=1",
"alt": "Example alt text"
}
}
}
breakpointSmall = 784px
breakpointLarge = 1300px
.homepage-faculty
background-color cloud
padding-top 80px
+above(breakpointSmall)
padding-top 128px
+above(breakpointLarge)
padding-top 0
+between(breakpointSmall, breakpointLarge)
padding-bottom 128px
&__container
@extends $contentContainer
&__box
+above(breakpointSmall)
align-items center
@supports (display: grid)
display grid
grid-template-columns 5fr 3fr
+above(breakpointLarge)
grid-template-columns 8fr 4fr
+between(breakpointSmall, breakpointLarge)
align-items start
&__content
padding-right 32px
&__header
@extends $tertiaryTitle
margin-bottom 16px
&__body
@extends $richText
margin-bottom 24px
&__image
position relative
height 256px
margin-bottom 80px
+below(breakpointSmall)
margin-top 48px
fullViewportWidthInContainer()
+above(breakpointSmall)
margin-top 0
+above(breakpointLarge)
height 480px
margin-bottom 160px
& figure
position absolute
width 100%
height 256px
+above(breakpointSmall)
width 512px
+above(breakpointLarge)
width s('calc(%s - (%s * (8 / 12)) + ((100vw - %s) / 2) + 16px)', maxContentWidth, maxContentWidth, maxContentWidth)
height 480px
&:before
background-color illiniOrange
content ""
display block
height 128px
left 0
mix-blend-mode multiply
position absolute
right 0
top 208px
z-index 1
+above(breakpointLarge)
height 224px
top 416px
There are no notes for this item.