<div class="homepage-cta">
<div class="homepage-cta__container">
<div class="homepage-cta__wrapper">
<div class="homepage-cta__text">
<div class="homepage-cta__line"></div>
<h2 class="homepage-cta__header" id="Feel your future calling? Take the next step.">
Feel your future calling? Take the next step.
</h2>
</div>
<ul class="homepage-cta__cta">
<li class="homepage-cta__cta-list">
<a href="#" class="standard-button standard-button--durp 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">I’m ready to learn more!</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>
</li>
<li class="homepage-cta__cta-list">
<a href="#" class="standard-button standard-button--durp standard-button--dark
standard-button---width standard-button--secondary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">I’d like to reach out with a question</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>
</li>
</ul>
</div>
</div>
</div>
<div class="homepage-cta">
<div class="homepage-cta__container">
<div class="homepage-cta__wrapper">
<div class="homepage-cta__text">
<div class="homepage-cta__line"></div>
<h2 class="homepage-cta__header"
id="{{ cta.header|sanitize }}">
{{ cta.header }}
</h2>
</div>
<ul class="homepage-cta__cta">
<li class="homepage-cta__cta-list">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
icon: 'internal-link',
type: 'primary',
text: cta.cta1.text,
url: cta.cta1.url,
width: regular,
}
} %}
</li>
{% if cta.cta2.text and cta.cta2.url %}
<li class="homepage-cta__cta-list">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
icon: 'internal-link',
type: 'secondary',
text: cta.cta2.text,
url: cta.cta2.url,
width: regular,
}
} %}
</li>
{% endif %}
</ul>
</div>
</div>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"cta": {
"header": "Feel your future calling? Take the next step.",
"cta1": {
"text": "I’m ready to learn more!",
"url": "#"
},
"cta2": {
"text": "I’d like to reach out with a question",
"url": "#"
}
}
}
breakpointSmall = 784px
breakpointLarge = 1300px
.homepage-cta
background-color charcoalLighter
position relative
&__container
@extends $contentContainer
&__wrapper
padding-top 80px
padding-bottom 96px
+above(breakpointSmall)
@supports (display: grid)
display grid
grid-template-columns 5fr 3fr
padding-bottom 128px
padding-top 128px
position relative
+above(breakpointLarge)
grid-template-columns 8fr 4fr
padding-bottom 160px
padding-top 160px
&__line
border-top 8px solid illiniOrange
left 0
position absolute
top 0
width 100vw
z-index 1
+above(breakpointSmall)
margin-bottom 32px
&__text
padding-top 24px
+above(breakpointSmall)
padding-top 40px
padding-right 48px
+above(breakpointLarge)
padding-right 128px
position relative
z-index 1
&__header
@extends $primaryTitle
color white
&__cta
align-content start
@supports (display: grid)
display grid
grid-gap 16px
grid-template-columns 1fr
padding-top 32px
+above(breakpointSmall)
padding-top 40px
position relative
z-index 1
There are no notes for this item.