University of Florida College of the Arts Pattern Library

Eyebrow 

<ul class="eyebrow-menu">
    <li class="eyebrow-menu__item">
        <a href="#" class="
                    eyebrow-menu__item-link
                    
                ">
            Contact Us
        </a>
    </li>
    <span class="eyebrow-menu__separator"><svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path id="Vector 5" d="M1 0V12" stroke="#4559A9" />
        </svg>
    </span>
    <li class="eyebrow-menu__item">
        <a href="#" class="
                    eyebrow-menu__item-link
                     eyebrow-menu__item-link--is-active
                ">
            Apply
        </a>
    </li>
    <span class="eyebrow-menu__separator"><svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path id="Vector 5" d="M1 0V12" stroke="#4559A9" />
        </svg>
    </span>
    <li class="eyebrow-menu__item">
        <a href="#" class="
                    eyebrow-menu__item-link
                    
                ">
            Make a Gift
        </a>
    </li>
</ul>
 
<ul class="eyebrow-menu">
    {% 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>
        {% if not loop.last %}
            <span class="eyebrow-menu__separator">{% include 'bits/icons/pipe-separator.twig' %}</span>
        {% endif %}
    {% endfor %}
</ul>
 
{
  "eyebrowMenu": {
    "items": [
      {
        "title": "Contact Us",
        "url": "#"
      },
      {
        "title": "Apply",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Make a Gift",
        "url": "#"
      }
    ]
  }
}
  • Content: 
    .eyebrow-menu
    --borderColor blue300
    --itemFocusBackgroundColor transparent
    --itemFocusColor blue100
    --itemTextColor white

    fluid(padding-right, 24px, 56px)
    display flex
    flex-wrap wrap

    &__item
        padding 0 16px

        &:last-child
            padding-right 0px

    &__item-link
        @extends $labelSmall
        color var(--itemTextColor)
        text-decoration none

        &--is-active
        &:focus
        &:hover
        &:active
        &:focus-within
            background-color var(--itemFocusBackgroundColor)
            color var(--itemFocusColor)

        &:focus
        &:hover
        &:focus-within
            text-decoration underline
  • URL: /components/raw/eyebrow/eyebrow.styl
  • Filesystem Path: patterns/partials/navigation/eyebrow/eyebrow.styl
  • Size: 700 Bytes

No notes defined.