Custom theme (replace with client name)

Eyebrow 

<ul class="eyebrow-menu eyebrow-menu--">
    <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 ">
            <form role="search" method="get" 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>
 
{
  "eyebrowMenu": {
    "items": [
      {
        "title": "News",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      }
    ]
  }
}
  • Content: 
    .eyebrow-menu
    --backgroundColor cloud
    --itemFocusBackgroundColor charcoal
    --itemFocusColor white
    --itemTextColor grayDarkest

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

    +above(breakpointHeaderSmall)
        display flex
        margin-bottom 32px

    &__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: patterns/partials/navigation/eyebrow/eyebrow.styl
  • Size: 700 Bytes

No notes defined.