<div class="cta-component cta-component--light cta-component--music cta-component--regular cta-component--large">
<div class="cta-component__button">
<a href="#" class="standard-button standard-button--music standard-button--light
standard-button--full-width standard-button--primary">
<div class="standard-button__container"><span class="standard-button__text-container"><span class="standard-button__text">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>
</div>
</div>
{% set width = component.jumbo == true ? 'jumbo' : 'regular' %}
<div class="cta-component cta-component--{{ background }} cta-component--{{ siteUnit }} cta-component--{{ width }} cta-component--{{ componentSpacing }}">
{% set hasHeader = component.header|default and (component.header|trim) %}
{% if component.header|default and (component.header|trim) %}
<h2 class="cta-component__header cta-component__header--{{ background }} cta-component__header--{{ component.hideHeader ? 'invisible' }}"
id="{{ component.header|sanitize }}">
{{ component.header }}
</h2>
{% endif %}
{% if component.jumbo|default(false) %}
<ul class="cta-component__link-list">
{% for iconLink in component.callToActionList %}
<li class="cta-component__list-item">
<div class="cta-component__divider-line cta-component__divider-line--{{ background }}"></div>
{% include 'partials/link-with-icon/link-with-icon.twig' with {
iconLink: iconLink
}%}
</li>
{% endfor %}
</ul>
{% else %}
<div class="cta-component__button">
{% set buttonWidth = hasHeader ? 'regular' : 'full' %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
type: 'primary',
icon: component.callToAction.type|default('internal') ~ '-link',
style: 'cta-component',
text: component.callToAction.text,
url: component.callToAction.url,
width: buttonWidth,
}
} %}
</div>
{% endif %}
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"componentSpacing": "large",
"component": {
"type": "cta",
"header": null,
"callToAction": {
"text": "Learn more",
"url": "#"
}
}
}
.cta-component
--backgroundColor cloud
&--arch
--backgroundColor cloud
&--art
--backgroundColor cloud
&--college
--backgroundColor cloud
&--dance
--backgroundColor cloud
&--landarch
--backgroundColor cloud
&--theatre
--backgroundColor cloud
&--music
--backgroundColor cloud
&--light
--backgroundColor cloud
&--dark
--backgroundColor charcoalLighter
&--large
@extends $componentWithMargin
&--medium
@extends $componentWithMarginMedium
&--small
@extends $componentWithMarginSmall
padding 24px 16px
position relative
fluid(padding-top padding-bottom, 500px, maxContentWidth, 48px, 64px)
fluid(padding-left padding-right, 500px, maxContentWidth, 24px, 48px)
&--light
background-color cloud
&--dark
background-color charcoalLighter
&__header
@extends $secondaryTitle
font-size responsive 40px 56px
margin-bottom 32px
&--invisible
@extends $visuallyHidden
&__link-list
@supports (display: grid)
display grid
grid-template-columns repeat(auto-fit, minmax(300px, 1fr))
margin-top 24px
&__divider-line
background-color cloudDark
content ""
display block
height 2px
margin-bottom 8px
width 100%
&--dark
background-color charcoalLight
&__list-item
padding 8px 20px 8px 0px
&--jumbo
&:before
background-color var(--backgroundColor)
content ''
height 100%
position absolute
right -100vw
top 0
width 100vw
&:after
background-color var(--backgroundColor)
content ''
height 100%
position absolute
left -100vw
top 0
width 100vw
$orangeStripe
background-color illiniOrange
bottom 0
content ""
display block
position absolute
top 24px
height 8px
width 100vw
.unit-durp .cta-component__header
&:before
@extends $orangeStripe
fluid(top, 500px, maxContentWidth, 24px, 32px)
There are no notes for this item.