<h2 class="linked-title linked-title--music linked-title--light">
<a href="#" class="
linked-title__link linked-title__link--light
">
Spring course: Transnational Community Resilience Workshop in Puerto Rico<span class="linked-title__link-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>
</a>
</h2>
<{{ element|default('h2') }} class="linked-title linked-title--{{ siteUnit }} linked-title--{{ background }}">
<a
href="{{ url }}"
class="
linked-title__link linked-title__link--{{ background }}
{{ large|default(false) ? ' linked-title__link--large' }}
">
{{ text | trim }}<span class="linked-title__link-icon"> {% include 'bits/icons/right-chevron.twig' %}</span>
</a>
</{{ element|default('h2') }}>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light",
"text": "Spring course: Transnational Community Resilience Workshop in Puerto Rico",
"url": "#"
}
.linked-title
--iconFillColor illiniOrange
--textColor charcoalLight
--textColorActive charcoalLight
&--arch&--light
--iconFillColor industrialBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--arch&--dark
--iconFillColor industrialBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--art&--light
--iconFillColor archesBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--art&--dark
--iconFillColor archesBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--college&--light
--iconFillColor illiniOrange
--textColor illiniBlue
--textColorActive illiniBlue
&--college&--dark
--iconFillColor illiniOrange
--textColor white
--textColorActive white
&--dance&--light
--iconFillColor archesBlue
--textColor charcoalLight
--textColorActive charcoalLight
&--dance&--dark
--iconFillColor archesBlue
--textColor white
--textColorActive archesBlueBright
&--durp&--light
--iconFillColor illiniOrange
--textColor charcoalLight
--textColorActive charcoalLight
&--durp&--dark
--iconFillColor illiniOrange
--textColor white
--textColorActive white
&--landarch&--light
--iconFillColor illiniOrange
--textColor charcoalDarker
--textColorActive charcoalDarker
&--landarch&--dark
--iconFillColor illiniOrange
--textColor white
--textColorActive white
&--theatre&--light
--iconFillColor illiniOrange
--textColor illiniBlue
--textColorActive illiniOrange
&--theatre&--dark
--iconFillColor illiniOrange
--textColor illiniBlue
--textColorActive illiniOrange
&--music&--light
--iconFillColor illiniOrange
--textColor illiniBlue
--textColorActive illiniOrange
&--music&--dark
--iconFillColor illiniOrange
--textColor illiniBlue
--textColorActive illiniOrange
&__link
@extends $secondaryLead
color var(--textColor)
text-decoration none
&--large
font-size responsive 32px 48px
& .linked-title__link-icon > svg
height 24px
width 12px
&:focus
&:hover
&:active
color var(--textColorActive)
.linked-title__link-icon svg
transform translate(4px, 0)
&__link-icon
display inline
white-space nowrap
& svg
transition all 0.3s
& .right-chevron__shape
fill var(--iconFillColor)
There are no notes for this item.