AFW Pattern Lab

Site Utility 

<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>
 
<div class="site-utility">
    <nav class="site-utility__wrapper container" aria-label="Top Navigation">
        {% render '@store-locator' %}
        <ul class="site-utility__navigation">
            {% for link in links %}
            <li>
                <a href="{{link.href}}">{{link.text|safe}}</a>
            </li>
            {% endfor %}
        </ul>
    </nav>
</div>
 
{
  "links": [
    {
      "href": "#",
      "text": "Stores"
    },
    {
      "href": "#",
      "text": "Weekly Ads"
    },
    {
      "href": "#",
      "text": "Financing"
    },
    {
      "href": "#",
      "text": "Help Center"
    },
    {
      "href": "#",
      "text": "About Us"
    }
  ]
}
  • Content: 
    .site-utility {
    $this: &;

    background: $color-primary-blue;
    padding-block: rem(13px);

    &__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__navigation {
        display: none;
        list-style: none;
        margin: 0 0 0 auto;
        padding: 0;

        @include media-lg-up {
            display: inline-flex;
        }

        li {
            margin: 0 rem(15px);

            &:first-child {
                margin-left: 0;
            }

            &:last-child {
                margin-right: 0;
            }
        }

        a {
            color: $color-white;
            font-size: rem(13px);
            font-weight: 600;
            text-decoration: none;
        }
    }
}
  • URL: /components/raw/site-utility/site-utility.scss
  • Filesystem Path: source/patterns/organisms/site-utility/site-utility.scss
  • Size: 770 Bytes

No notes defined.