Eyebrow

<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
      }
    ]
  }
}
  • Content:
    .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)
    
  • URL: /components/raw/eyebrow/eyebrow.styl
  • Filesystem Path: components/partials/eyebrow/eyebrow.styl
  • Size: 1.9 KB

There are no notes for this item.