E3 Alliance Pattern Library

Eyebrow 

<ul class="eyebrow-menu">
    <li class="eyebrow-menu__item">
        <a href="#" class="
                    eyebrow-menu__item-link
                    
                ">Donate </a>
    </li>
    <li class="eyebrow-menu__item">
        <a href="#" class="
                    eyebrow-menu__item-link
                    
                ">Get Involved </a>
    </li>
    <li class="eyebrow-menu__item">
        <a href="#" class="
                    eyebrow-menu__item-link
                    
                ">Data & Trends <span class="eyebrow-menu__item-icon"><svg class="external-link" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path class="_mark external-link__shape" d="M12.75 10.75C13.3145 10.75 13.8125 11.248 13.8125 11.8125V15C13.8125 16.1953 12.8496 17.125 11.6875 17.125H2.125C0.929688 17.125 0 16.1953 0 15V5.4375C0 4.27539 0.929688 3.3125 2.125 3.3125H5.3125C5.87695 3.3125 6.375 3.81055 6.375 4.375C6.375 4.97266 5.87695 5.4375 5.3125 5.4375H2.125V15H11.6875V11.8125C11.6875 11.248 12.1523 10.75 12.75 10.75ZM16.668 0.457031C16.8672 0.65625 17 0.921875 17 1.1875V6.5C17 7.09766 16.4355 7.5625 15.9043 7.5625C15.3398 7.5625 14.875 7.09766 14.875 6.5V3.77734L7.4375 11.2812C7.00586 11.7129 6.3418 11.7129 5.91016 11.2812C5.51172 10.8828 5.51172 10.2188 5.91016 9.78711L13.3809 2.2168H10.625C10.0605 2.2168 9.5625 1.75195 9.5625 1.1875C9.5625 0.623047 10.0273 0.125 10.625 0.125H15.9375C16.2031 0.125 16.4688 0.257812 16.668 0.457031Z" fill="#88C965" />
                </svg>
            </span> </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}} {% if item.isExternal %}<span class="eyebrow-menu__item-icon">{% include 'bits/icons/external-link.twig' %}</span> {% endif %}
            </a>
        </li>
    {% endfor %}
</ul>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "eyebrowMenu": {
    "items": [
      {
        "title": "Donate",
        "url": "#"
      },
      {
        "title": "Get Involved",
        "url": "#"
      },
      {
        "title": "Data & Trends",
        "url": "#",
        "isExternal": true
      }
    ]
  }
}
  • Content: 
    .eyebrow-menu
    --itemFocusBackgroundColor jet
    --itemFocusColor white
    --itemTextColor white
    --iconColor greenApple
    --iconColorActive white

    display none
    flex-wrap wrap
    gap 24px
    justify-content flex-end
    margin-left auto

    +above(breakpointHeaderSmall)
        @extends $contentContainer
        display flex
        padding 12px 24px
        position relative
        text-align right
        width 100%

    +above(650px)
        padding 12px 48px

    &__item-link
        color var(--itemTextColor)
        cursor pointer
        font-weight 600
        line-height 24px
        text-decoration none

        &--is-active
        &:focus
        &:hover
        &:active
        &:focus-within
            color var(--itemFocusColor)
            text-decoration underline

            svg
                path
                    fill var(--iconColorActive)

    &__item-icon
        margin-left 8px
        width 17px
        height 18px
        vertical-align middle

        svg
            path
                fill var(--iconColor)
                height 16px
                width 16px
  • URL: /components/raw/eyebrow/eyebrow.styl
  • Filesystem Path: patterns/partials/navigation/eyebrow/eyebrow.styl
  • Size: 1.1 KB

No notes defined.