<div class="link-box link-box--durp">
<h2 class="link-box__label" id="Link box label">
Link box label
</h2>
<ul class="link-box__links">
<li class="link-box__link-container">
<a href="http://www.bikeleague.org" class="link-box__link" target="_blank">
Bicycle Friendly League
<div class="link-box__link-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M12.586 2H10a1 1 0 1 1 0-2h6v6a1 1 0 0 1-2 0V3.414l-8.293 8.293a1 1 0 1 1-1.414-1.414L12.586 2zM2 14h10V9a1 1 0 0 1 2 0v7H0V2h7a1 1 0 1 1 0 2H2v10z"/>
</svg>
</div>
</a>
</li>
<li class="link-box__link-container">
<a href="#" class="link-box__link">
Dr. Arnab Chakraborty Research Laboratory
<div class="link-box__link-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>
</div>
</a>
</li>
<li class="link-box__link-container">
<a href="#" class="link-box__link">
Download
<div class="link-box__link-icon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon-container" width="16" height="16" viewBox="0 0 16 16">
<path class="icon-fill" fill="#E84A27" fill-rule="evenodd" d="M8 4a1 1 0 0 1 1 1v7.172l1.828-1.829a1 1 0 1 1 1.415 1.414L8 16l-4.243-4.243a1 1 0 1 1 1.415-1.414L7 12.172V5a1 1 0 0 1 1-1zm8-4v16h-3a1 1 0 0 1 0-2h1V2H2v12h1a1 1 0 0 1 0 2H0V0h16z"/>
</svg>
</div>
</a>
</li>
</ul>
</div>
<div class="link-box link-box--{{ siteUnit }}">
<h2 class="link-box__label"
id="{{ label|sanitize }}">
{{ label }}
</h2>
<ul class="link-box__links">
{% for item in links %}
{% if item.url|default and item.text|default %}
<li class="link-box__link-container">
<a
href="{{ item.url }}"
class="link-box__link"
{{ item.type == 'external' ? 'target="_blank"' }}
{% set onClick %}onClick="window.open(this.href,'targetWindow','toolbar=no,location=0,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=250'); return false;"{% endset %}
{{ item.dialog ? onClick }}
>
{{ item.text }}
<div class="link-box__link-icon">
{% include "/bits/icons/" ~ item.type|default('internal') ~ "-link.twig" %}
</div>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"label": "Link box label",
"links": [
{
"text": "Bicycle Friendly League",
"type": "external",
"url": "http://www.bikeleague.org"
},
{
"text": "Dr. Arnab Chakraborty Research Laboratory",
"type": "internal",
"url": "#"
},
{
"text": "Download",
"type": "download",
"url": "#"
}
]
}
.link-box
--iconFillColor altgeld
--iconFillColorActive illiniOrange
--linkColorActive illiniOrange
--textColor charcoalLight
--linkColor cloud
&--arch
--iconFillColor industrialBlue
--iconFillColorActive industrialBlueLight
--linkColorActive industrialBlue
--textColor charcoalLight
--linkColor cloud
&--art
--iconFillColor archesBlue
--iconFillColorActive archesBlueLight
--linkColorActive archesBlueDark
--textColor charcoalLight
--linkColor cloud
&--college
--iconFillColor illiniOrange
--iconFillColorActive illiniOrange
--linkColorActive altgeld
--textColor charcoalDark
--linkColor white
&--dance
--iconFillColor archesBlue
--iconFillColorActive archesBlueLight
--linkColorActive archesBlueDark
--textColor charcoalLight
--linkColor cloud
&--durp
--iconFillColor altgeld
--iconFillColorActive illiniOrange
--linkColorActive illiniOrange
--textColor charcoalLight
--linkColor cloud
&--landarch
--iconFillColor illiniOrange
--iconFillColorActive illiniOrange
--linkColorActive altgeld
--textColor charcoalDark
--linkColor cloud
&--theatre
--iconFillColor illiniOrange
--iconFillColorActive illiniOrange
--linkColorActive illiniOrange
--textColor illiniBlue
--linkColor cloud
&--music
--iconFillColor illiniOrange
--iconFillColorActive illiniOrange
--linkColorActive illiniOrange
--textColor illiniBlue
--linkColor cloud
margin-bottom 32px
&__label
@extends $headline4
margin-bottom 12px
&__link
align-items center
background-color var(--linkColor)
color var(--textColor)
display flex
font-family proximaNova
font-weight 500
justify-content space-between
margin-bottom 2px
padding 12px 16px
text-decoration none
transition all 0.3s
&:focus
&:hover
&:active
background-color #fff
color var(--linkColorActive)
& .icon-fill
fill var(--iconFillColorActive)
&__link-icon
& svg
& .icon-fill
& path
fill var(--iconFillColor)
There are no notes for this item.