<ul class="eyebrow-menu eyebrow-menu--durp">
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
">
News
</a>
</li>
<li class="eyebrow-menu__item">
<a href="#" class="
eyebrow-menu__item-link
eyebrow-menu__item-link--is-active
">
Events
</a>
</li>
<li class="eyebrow-menu__item">
<div class="quick-search quick-search--durp ">
<form role="search" method="get" aria-label="quick search form" id="quick-search-form" class="quick-search__form" action="">
<input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input ">
<label for="quick-search-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
<svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z"/>
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-submit" value="Search" />
</form>
</div>
</li>
</ul>
<ul class="eyebrow-menu eyebrow-menu--{{ siteUnit }}">
{% for item in eyebrowMenu.items %}
<li class="eyebrow-menu__item">
<a
href="{{ item.url }}"
class="
eyebrow-menu__item-link
{{ item.isActive ? ' eyebrow-menu__item-link--is-active' : '' }}
"
>
{{ item.title }}
</a>
</li>
{% endfor %}
<li class="eyebrow-menu__item">
{% include 'bits/quick-search/quick-search.twig' %}
</li>
</ul>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"eyebrowMenu": {
"items": [
{
"title": "News",
"url": "#"
},
{
"title": "Events",
"url": "#",
"isActive": true
}
]
}
}
.eyebrow-menu
--backgroundColor cloud
--itemFocusBackgroundColor altgeld
--itemFocusColor white
--itemTextColor charcoalLight
&--arch
--backgroundColor cloud
--itemFocusBackgroundColor industrialBlue
--itemFocusColor white
--itemTextColor charcoalLight
&--art
--backgroundColor cloud
--itemFocusBackgroundColor archesBlue
--itemFocusColor black
--itemTextColor charcoalLight
&--college
--backgroundColor cloud
--itemFocusBackgroundColor illiniOrange
--itemFocusColor illiniBlue
--itemTextColor illiniBlue
&--dance
--backgroundColor charcoalDarker
--itemFocusBackgroundColor archesBlue
--itemFocusColor black
--itemTextColor white
&--durp
--backgroundColor cloud
--itemFocusBackgroundColor altgeld
--itemFocusColor white
--itemTextColor charcoalLight
&--landarch
--backgroundColor cloud
--itemFocusBackgroundColor illiniOrange
--itemFocusColor black
--itemTextColor charcoalDarker
&--theatre
--backgroundColor illiniBlueDark
--itemFocusBackgroundColor illiniOrange
--itemFocusColor illiniBlue
--itemTextColor white
&--music
--backgroundColor almaMaterDark
--itemFocusBackgroundColor illiniOrange
--itemFocusColor illiniBlue
--itemTextColor white
display flex
flex-wrap wrap
justify-content flex-end
&__item
margin-left 8px
margin-bottom 8px
&__item-link
@extends $eyebrowPill
background-color var(--backgroundColor)
color var(--itemTextColor)
&--is-active
&:focus
&:hover
&:active
&:focus-within
background-color var(--itemFocusBackgroundColor)
color var(--itemFocusColor)
There are no notes for this item.