<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
}
]
}
}
.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
No notes defined.