AFW Pattern Lab

See In Store 

<button type="button" class="a-btn a-btn--primary see-in-store__toggle">See it in Store</button>

<div class="see-in-store-modal__wrapper">
    <div class="see-in-store-modal__inner">
        <ul class="see-in-store__list">

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Gilbert, AZ Showroom</p>
                    <p class="see-in-store__address">4700 S Power Rd Gilbert, AZ, 85296</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Glendale, AZ Showroom</p>
                    <p class="see-in-store__address">5801 N 99th Ave Glendale, AZ, 85305</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 8pm</p>
                    <p class="see-in-store__title">AFW Christown, AZ Showroom</p>
                    <p class="see-in-store__address">1646 W Montebello Ave Phoenix, AZ, 85015</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Aurora, CO Showroom</p>
                    <p class="see-in-store__address">1700 S. Abilene Aurora, CO, 80012</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Colorado Springs, CO Showroom</p>
                    <p class="see-in-store__address">2805 N Chestnut St Colorado Springs, CO, 80907</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Englewood, CO Showroom</p>
                    <p class="see-in-store__address">8820 American Way Englewood, CO, 80112</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Firestone, CO Showroom</p>
                    <p class="see-in-store__address">10550 Jake Jabs Blvd Firestone, CO, 80504</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Fort Collins, CO Showroom</p>
                    <p class="see-in-store__address">625 SW Frontage Rd Fort Collins, CO, 80524</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 9pm</p>
                    <p class="see-in-store__title">AFW Grand Junction, CO Showroom</p>
                    <p class="see-in-store__address">2570 American Way Grand Junction, CO, 81501</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 9pm</p>
                    <p class="see-in-store__title">AFW Lakewood, CO Showroom</p>
                    <p class="see-in-store__address">5390 South Wadsworth Blvd Lakewood, CO, 80123</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 9pm</p>
                    <p class="see-in-store__title">AFW Pueblo, CO Showroom</p>
                    <p class="see-in-store__address">4711 Dillon Drive Pueblo, CO, 81008</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Thornton, CO Showroom</p>
                    <p class="see-in-store__address">8501 Grant St Thornton, CO, 80229</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 9pm</p>
                    <p class="see-in-store__title">AFW Westminster, CO Showroom</p>
                    <p class="see-in-store__address">9410 Wadsworth Parkway Westminster, CO, 80021</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Conroe, TX Showroom</p>
                    <p class="see-in-store__address">12310 INTERSTATE 45 S Conroe, TX, 77304</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Katy, TX Showroom</p>
                    <p class="see-in-store__address">500 Pin Oak Road Katy, TX, 77494</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

            <li class="see-in-store__item">
                <a href="#" class="see-in-store__link">
                    <p class="see-in-store__open">Open Until 10pm</p>
                    <p class="see-in-store__title">AFW Webster, TX Showroom</p>
                    <p class="see-in-store__address">21501 Gulf Freeway Webster, TX, 77598</p>
                    <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                </a>
            </li>

        </ul>
    </div>
</div>
 
<button type="button" class="a-btn a-btn--primary see-in-store__toggle">{{button}}</button>

<div class="see-in-store-modal__wrapper">
    <div class="see-in-store-modal__inner">
        <ul class="see-in-store__list">
            {% for item in showrooms %}
                <li class="see-in-store__item">
                    <a href="#" class="see-in-store__link">
                        <p class="see-in-store__open">{{item.open}}</p>
                        <p class="see-in-store__title">{{item.title}}</p>
                        <p class="see-in-store__address">{{item.address}}</p>
                        <span class="see-in-store__icon far fa-fw fa-external-link-alt" aria-hidden="true"></span>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>
 
{
  "button": "See it in Store",
  "showrooms": [
    {
      "name": "Gilbert, AZ",
      "open": "Open Until 10pm",
      "title": "AFW Gilbert, AZ Showroom",
      "address": "4700 S Power Rd Gilbert, AZ, 85296"
    },
    {
      "name": "Glendale, AZ",
      "open": "Open Until 10pm",
      "title": "AFW Glendale, AZ Showroom",
      "address": "5801 N 99th Ave Glendale, AZ, 85305"
    },
    {
      "name": "Phoenix, AZ",
      "open": "Open Until 8pm",
      "title": "AFW Christown, AZ Showroom",
      "address": "1646 W Montebello Ave Phoenix, AZ, 85015"
    },
    {
      "name": "Aurora, CO",
      "open": "Open Until 10pm",
      "title": "AFW Aurora, CO Showroom",
      "address": "1700 S. Abilene Aurora, CO, 80012"
    },
    {
      "name": "Colorado Springs, CO",
      "open": "Open Until 10pm",
      "title": "AFW Colorado Springs, CO Showroom",
      "address": "2805 N Chestnut St Colorado Springs, CO, 80907"
    },
    {
      "name": "Englewood, CO",
      "open": "Open Until 10pm",
      "title": "AFW Englewood, CO Showroom",
      "address": "8820 American Way Englewood, CO, 80112"
    },
    {
      "name": "Firestone, CO",
      "open": "Open Until 10pm",
      "title": "AFW Firestone, CO Showroom",
      "address": "10550 Jake Jabs Blvd Firestone, CO, 80504"
    },
    {
      "name": "Fort Collins, CO",
      "open": "Open Until 10pm",
      "title": "AFW Fort Collins, CO Showroom",
      "address": "625 SW Frontage Rd Fort Collins, CO, 80524"
    },
    {
      "name": "Grand Junction, CO",
      "open": "Open Until 9pm",
      "title": "AFW Grand Junction, CO Showroom",
      "address": "2570 American Way Grand Junction, CO, 81501"
    },
    {
      "name": "Lakewood, CO",
      "open": "Open Until 9pm",
      "title": "AFW Lakewood, CO Showroom",
      "address": "5390 South Wadsworth Blvd Lakewood, CO, 80123"
    },
    {
      "name": "Pueblo, CO",
      "open": "Open Until 9pm",
      "title": "AFW Pueblo, CO Showroom",
      "address": "4711 Dillon Drive Pueblo, CO, 81008"
    },
    {
      "name": "Thornton, CO",
      "open": "Open Until 10pm",
      "title": "AFW Thornton, CO Showroom",
      "address": "8501 Grant St Thornton, CO, 80229"
    },
    {
      "name": "Westminster, CO",
      "open": "Open Until 9pm",
      "title": "AFW Westminster, CO Showroom",
      "address": "9410 Wadsworth Parkway Westminster, CO, 80021"
    },
    {
      "name": "Conroe, TX",
      "open": "Open Until 10pm",
      "title": "AFW Conroe, TX Showroom",
      "address": "12310 INTERSTATE 45 S Conroe, TX, 77304"
    },
    {
      "name": "Katy, TX",
      "open": "Open Until 10pm",
      "title": "AFW Katy, TX Showroom",
      "address": "500 Pin Oak Road Katy, TX, 77494"
    },
    {
      "name": "Webster, TX",
      "open": "Open Until 10pm",
      "title": "AFW Webster, TX Showroom",
      "address": "21501 Gulf Freeway Webster, TX, 77598"
    }
  ]
}
  • Content: 
    .see-in-store {
    $this: &;

    &-modal {
        &__wrapper {
            margin: 0;
            padding: 0;
        }
    
        &__inner {
            margin: 0;
            padding: 0;
        }
    }

    &__toggle {}


    &__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    &__item {
        margin: 0;
        padding: 0;
        border-bottom: rem(1px) solid $color-gray-light;
    }

    &__icon {
        color: $color-gray;
        position: absolute;
        top: 50%;
        right: rem(16px);
        transform: translateY(-50%);
    }

    &__open {
        color: $color-green-dark;
        font-size: rem(13px);
        font-weight: 500;
        line-height: 1;
        margin: 0 0 rem(4px);
        padding: 0;
    }

    &__title {
        font-size: rem(17px);
        font-weight: 600;
        line-height: 1;
        margin: 0 0 rem(4px);
        padding: 0;
    }

    &__address {
        line-height: 1;
        margin: 0;
        padding: 0;
    }

    &__link {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        color: $color-primary-text;
        padding: rem(12px) rem(16px);
        text-decoration: none;
        position: relative;

        &:hover,
        &:focus {
            background: $color-gray-lighter;
            #{$this}__icon {
                color: $color-primary-blue;
            }
        }
    }
}
  • URL: /components/raw/see-in-store/_see-in-store.scss
  • Filesystem Path: source/patterns/molecules/see-in-store/_see-in-store.scss
  • Size: 1.4 KB
  • Content: 
    $(function () {
    $('.see-in-store-modal__wrapper').kendoWindow({
        size: 'auto',
        title: 'On Display At:',
        modal: {
            preventScroll: true
        },
        position: {
            top: '50%',
            left: '50%'
        },
        maxHeight: 400,
        draggable: false,
        resizable: false,
        scrollable: true,
    })

    var modal = $('.see-in-store-modal__wrapper').data('kendoWindow')

    modal.wrapper.addClass('see-in-store-modal')

    $('.see-in-store__toggle').on('click touch', function (event) {
        event.preventDefault()
        modal.open()
    })
})
  • URL: /components/raw/see-in-store/see-in-store.js
  • Filesystem Path: source/patterns/molecules/see-in-store/see-in-store.js
  • Size: 622 Bytes

No notes defined.