AFW Pattern Lab

Site Header 

<div class="site-utility">
    <nav class="site-utility__wrapper container" aria-label="Top Navigation">
        <button class="store-locator">
            <span class="store-locator__inner">
                <i class="fas fa-store store-locator__icon" aria-hidden="false"></i>
                <span class="store-locator__text">You're Shopping <span class="store-locator__name">Englewood, CO</span></span>
                <i class="fas fa-chevron-down store-locator__arrow" aria-hidden="false"></i>
            </span>
        </button>
        <ul class="site-utility__navigation">

            <li>
                <a href="#">Stores</a>
            </li>

            <li>
                <a href="#">Weekly Ads</a>
            </li>

            <li>
                <a href="#">Financing</a>
            </li>

            <li>
                <a href="#">Help Center</a>
            </li>

            <li>
                <a href="#">About Us</a>
            </li>

        </ul>
    </nav>
</div>

<header class="site-header">
    <div class="site-header__inner container">
        <a href="#" class="site-header__logo">
            <img src="../../images/260x70_logo-min.png" alt="American Furniture Warehouse" />
        </a>
        <div class="site-menu">
            <div class="site-menu__inner">

                <a class="a-btn site-menu__hamburger" aria-label="Elit et Exercitation">
                    <span class="a-btn__bar"></span>
                    <span class="a-btn__bar"></span>
                    <span class="a-btn__bar"></span>
                </a>

                <nav class="site-menu__list">
                    <a class="site-menu__link" href="#">Shop By Category</a>
                    <a class="site-menu__link" href="#">Room Planner</a>
                    <a class="site-menu__link" href="#">Deals</a>
                </nav>
            </div>
        </div>
        <div class="site-search site-header__search">
            <div class="site-search__inner">

                <input type="text" class="form__input" id="search" placeholder="What can we help you find?" />

                <button class="site-search__submit" type="submit">
                    <i class="icon fas fa-search fa-fw" aria-hidden="true"></i>
                    <span class="sr-only">Search</span>
                </button>
            </div>
        </div>

        <div class="user-actions">
            <div class="user-actions__inner">
                <button class="user-actions__stores">
                    <img src="../../images/icons/location.svg" alt="Stores Icon">
                </button>
                <button class="user-actions__account">
                    <img src="../../images/icons/user.svg" alt="User Icon">
                </button>
                <button class="user-actions__cart">
                    <span class="user-actions__cart__qty">1</span>
                    <img src="../../images/icons/cart.svg" alt="Cart Icon">
                </button>
            </div>
        </div>
    </div>
</header>
 
{% render '@site-utility' %}
<header class="site-header">
    <div class="site-header__inner container">
        <a href="#" class="site-header__logo">
            <img src="{{'/images/260x70_logo-min.png'|path}}" alt="American Furniture Warehouse"/>
        </a>
        {% render '@site-menu' %}
        {% render '@site-search', siteSearch, true %}
        {% render '@user-actions' %}
    </div>
</header>
 
{
  "siteSearch": {
    "modifierClasses": "site-header__search"
  }
}
  • Content: 
    .site-header {
    $this: &;

    box-shadow: 0 rem(4px) rem(4px) rgba($color-black, .1);
    padding-block: rem(10px);
    position: relative;
    z-index: 1;

    &__logo {
        display: inline-flex;
        img {
            max-height: rem(48px);
            width: auto;
        }
    }

    &__inner {
        display: flex;
        align-items: center;
        justify-content: stretch;
        flex-wrap: wrap;

        @include media-lg-up {
            flex-wrap: nowrap;
        }
    }

    &__search {
        flex: 1 1 auto;
        margin-inline: rem(15px);
        padding-inline: rem(12px);
    }
}
  • URL: /components/raw/site-header/site-header.scss
  • Filesystem Path: source/patterns/organisms/site-header/site-header.scss
  • Size: 618 Bytes

No notes defined.