<ul class="footer-menu footer-menu--durp footer-menu footer-menu--dark">
<li class="footer-menu__item">
<a href="#" class="footer-menu__item-link
">
Contact Us
</a>
</li>
<li class="footer-menu__item">
<a href="#" class="footer-menu__item-link
footer-menu__item-link--active ">
Alumni
</a>
</li>
<li class="footer-menu__item">
<a href="#" class="footer-menu__item-link
">
Give a Gift
</a>
</li>
<li class="footer-menu__item">
<a href="#" class="footer-menu__item-link
">
Resources for Current Students
</a>
</li>
</ul>
<ul class="footer-menu footer-menu--{{ siteUnit }} footer-menu footer-menu--{{ background }}">
{% for item in footerMenu.items %}
<li class="footer-menu__item">
<a href="{{ item.url }}" class="footer-menu__item-link
{{ item.isActive ? 'footer-menu__item-link--active' }} ">
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"footerMenu": {
"items": [
{
"title": "Contact Us",
"url": "#"
},
{
"title": "Alumni",
"url": "#",
"isActive": true
},
{
"title": "Give a Gift",
"url": "#"
},
{
"title": "Resources for Current Students",
"url": "#"
}
]
}
}
.footer-menu
--itemLinkActiveBackgroundColor charcoalLight
--itemLinkActiveBorderColor illiniOrange
--itemLinkActiveColor white
--itemLinkBackgroundColor charcoalLight
--itemLinkBorder 2px solid charcoalLight
--itemLinkColor white
&--arch
--itemLinkActiveBackgroundColor industrialBlue
--itemLinkActiveBorderColor none
--itemLinkActiveColor charcoalLight
--itemLinkBackgroundColor white
--itemLinkBorder none
--itemLinkColor charcoalLight
&--art
--itemLinkActiveBackgroundColor archesBlue
--itemLinkActiveBorderColor none
--itemLinkActiveColor black
--itemLinkBackgroundColor charcoalLight
--itemLinkBorder none
--itemLinkColor white
&--college
--itemLinkActiveBackgroundColor illiniOrange
--itemLinkActiveBorderColor none
--itemLinkActiveColor illiniBlue
--itemLinkBackgroundColor cloud
--itemLinkBorder none
--itemLinkColor illiniBlue
&--dance
--itemLinkActiveBackgroundColor archesBlue
--itemLinkActiveBorderColor none
--itemLinkActiveColor black
--itemLinkBackgroundColor charcoalDarker
--itemLinkBorder none
--itemLinkColor white
&__durp
--itemLinkActiveBackgroundColor charcoalLight
--itemLinkActiveBorderColor illiniOrange
--itemLinkActiveColor white
--itemLinkBackgroundColor charcoalLight
--itemLinkBorder 2px solid charcoalLight
--itemLinkColor white
&--landarch
--itemLinkActiveBackgroundColor illiniOrange
--itemLinkActiveBorderColor none
--itemLinkActiveColor black
--itemLinkBackgroundColor cloud
--itemLinkBorder none
--itemLinkColor charcoalDarker
&--theatre
--itemLinkActiveBackgroundColor illiniOrange
--itemLinkActiveBorderColor none
--itemLinkActiveColor illiniBlue
--itemLinkBackgroundColor illiniBlueDark
--itemLinkBorder none
--itemLinkColor white
&--music
--itemLinkActiveBackgroundColor illiniOrange
--itemLinkActiveBorderColor none
--itemLinkActiveColor illiniBlue
--itemLinkBackgroundColor almaMaterDark
--itemLinkBorder none
--itemLinkColor white
&__item
margin-bottom 2px
&__item-link
@extends $tertiaryLink
background-color var(--itemLinkBackgroundColor)
border var(--itemLinkBorder)
color var(--itemLinkColor)
display block
padding 12px 16px
text-decoration none
transition all 0.3s
&--active
&:focus
&:hover
&:active
background-color var(--itemLinkActiveBackgroundColor)
border-color var(--itemLinkActiveBorderColor)
color var(--itemLinkActiveColor)
There are no notes for this item.