Custom theme (replace with client name)

Eyebrow 

<ul class="eyebrow-menu">
    <li class="eyebrow-menu__item">
        <a href="#" class="
                    eyebrow-menu__item-link
                    
                ">Data & Trends </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>
 
{
  "eyebrowMenu": {
    "items": [
      {
        "title": "Data & Trends",
        "url": "#"
      }
    ]
  }
}
  • Content: 
    .eyebrow-menu
    --itemFocusBackgroundColor jet
    --itemFocusColor white
    --itemTextColor white
    --iconColor greenApple
    --iconColorActive white

    display none
    flex-wrap wrap
    justify-content flex-end
    margin-left auto

    +above(breakpointHeaderSmall)
        @extends $contentContainer
        display block
        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.