AFW Pattern Lab

Layout 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Default Layout</title>
    <link media="all" rel="stylesheet" href="../../css/styles.css">
    <link media="all" rel="stylesheet" href="../../css/styleguide.css">
    <link rel="shortcut icon" href="../../images/favicon.ico">
    <script src="//kit.fontawesome.com/6a7c438e1c.js" crossorigin="anonymous"></script>
    <script src="//code.jquery.com/jquery-3.7.1.js" crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" crossorigin="anonymous"></script>
    <script src="../../js/vendor/kendo/2020.1.406/kendo.core.min.js"></script>
    <script src="../../js/vendor/kendo/2020.1.406/kendo.userevents.min.js"></script>
    <script src="../../js/vendor/kendo/2020.1.406/kendo.draganddrop.min.js"></script>
    <script src="../../js/vendor/kendo/2020.1.406/kendo.popup.min.js"></script>
    <script src="../../js/vendor/kendo/2020.1.406/kendo.window.min.js"></script>
</head>

<body class="afw-pattern-lab">
    <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>
    <main></main>
    <button class="back-to-top" aria-label="Back To Top">
        <i class="fas fa-chevron-up" aria-hidden="true"></i>
    </button>
    <footer class="site-footer">
        <div class="site-footer__top">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-lg-8">
                        <div class="row">

                            <div class="col-12 col-lg-4">
                                <h5 class="site-footer__header">About AFW</h5>
                                <ul class="site-footer__navigation">

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">About Jake</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Stores</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Careers</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Blog</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">AFW Giving Back</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">School Rewards</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Environmental Initiatives</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Customer Reviews</a>
                                    </li>

                                </ul>
                            </div>

                            <div class="col-12 col-lg-4">
                                <h5 class="site-footer__header">My Account</h5>
                                <ul class="site-footer__navigation">

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Track Order</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">My Orders</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">My Account</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">My Addresses</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Wishlist</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Recently Viewed Products</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Shopping Cart</a>
                                    </li>

                                </ul>
                            </div>

                            <div class="col-12 col-lg-4">
                                <h5 class="site-footer__header">Help &amp; Support</h5>
                                <ul class="site-footer__navigation">

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Contact Us</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Help Center</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Platinum Delivery Service</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Pick Up</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Warranty</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Returns</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Financing</a>
                                    </li>

                                    <li class="site-footer__item">
                                        <a href="#" class="site-footer__link">Gift Cards</a>
                                    </li>

                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <h5 class="site-footer__header">Be The First To Know</h5>
                        <p class="c-white fs-14">Join our newsletter to know about our new arrivals, events, contests, design tips, and more.</p>

                        <h5 class="site-footer__header mt-lg-40">Don't Forget! Follow Us On</h5>
                        <div class="site-footer__social-links mb-lg-40">

                            <a href="#" aria-label="Facebook">
                                <i class="icon fab fa-facebook fa-fw" aria-hidden="true"></i>
                            </a>

                            <a href="#" aria-label="Instagram">
                                <i class="icon fab fa-instagram fa-fw" aria-hidden="true"></i>
                            </a>

                            <a href="#" aria-label="Pinterest">
                                <i class="icon fab fa-pinterest fa-fw" aria-hidden="true"></i>
                            </a>

                            <a href="#" aria-label="YouTube">
                                <i class="icon fab fa-youtube fa-fw" aria-hidden="true"></i>
                            </a>

                            <a href="#" aria-label="Snapchat">
                                <i class="icon fab fa-snapchat fa-fw" aria-hidden="true"></i>
                            </a>

                        </div>

                        <h5 class="site-footer__header">Get the AFW Visualizer App</h5>
                        <div class="site-footer__app-links">

                            <a href="#" class="afw-visualizer" aria-label="AFW Visualizer">
                                <img src="../../images/icons/40x40_logo-min.png" alt="">
                            </a>

                            <a href="#" class="apple-download" aria-label="Apple App Store">
                                <img src="../../images/icons/apple-download-badge.png" alt="">
                            </a>

                            <a href="#" class="google-download" aria-label="Google Play Store">
                                <img src="../../images/icons/google-download-badge.png" alt="">
                            </a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-footer__bottom">
            <div class="container">
                <ul class="site-footer__legal-links">

                    <li class="site-footer__item">
                        <a href="#" class="site-footer__link">Terms of Service</a>
                    </li>

                    <li class="site-footer__item">
                        <a href="#" class="site-footer__link">Privacy Policy</a>
                    </li>

                    <li class="site-footer__item">
                        <a href="#" class="site-footer__link">Accessibility</a>
                    </li>

                </ul>
                <p class="site-footer__copyright">Copyright &copy; [DATE] American Furniture Warehouse. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
    <script src="../../js/all.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js"></script>
    <script>
        var output = ''
        var outputHtmlEscape = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
        }
        axe
            .run({
                fromFrames: ['iframe', {
                    fromShadowDOM: ['.site-header']
                }]
            })
            .then(function(res) {
                //console.log(res)
                if (res.violations.length) {
                    res.violations.forEach(function(violation) {
                        var emoji = '😰';
                        switch (violation.impact) {
                            case 'critical':
                                emoji = '😱'
                                break;
                            case 'serious':
                                emoji = '😨'
                                break;
                        }
                        output += `<div>
						<p>${emoji}<strong>${violation.help}</strong><br/><strong>${violation.impact}</strong> ${violation.tags ? violation.tags.filter(function (el, _i) { return el.startsWith('wcag') }).join(', ') : ''}<br/><small><a href="${violation.helpUrl}" target="_blank">${violation.helpUrl}</a></small></p>`
                        violation.nodes.forEach(function(node) {
                            output += `<p>${node.failureSummary}</p>`
                            output += `<div><pre style="background:white;border-radius:4px;border:1px solid lightgrey;margin-bottom:8px;">${node.html.replace(/[&<>]/g, function(tag) {
								return outputHtmlEscape[tag] || tag
							})}</pre><div style="display:inline-block;font-size:13px;border-radius:4px;border: 1px solid lightgray;padding:2px;user-select:all;">$('${node.target.join()}')</div></div><hr/>`
                        })
                        output += `</div>`
                        //console.log(violation)
                    })
                    parent.document.querySelector('.a11y-output').innerHTML = output
                }
            })
            .catch(function(_err) {})
    </script>
</body>

</html>
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Default Layout</title>
    <link media="all" rel="stylesheet" href="{{'/css/styles.css'|path}}">
    <link media="all" rel="stylesheet" href="{{'/css/styleguide.css'|path}}">
    <link rel="shortcut icon" href="{{'/images/favicon.ico'|path}}">
    <script src="//kit.fontawesome.com/6a7c438e1c.js" crossorigin="anonymous"></script>
    <script src="//code.jquery.com/jquery-3.7.1.js" crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" crossorigin="anonymous"></script>
    <script src="{{'/js/vendor/kendo/2020.1.406/kendo.core.min.js'|path}}"></script>
    <script src="{{'/js/vendor/kendo/2020.1.406/kendo.userevents.min.js'|path}}"></script>
    <script src="{{'/js/vendor/kendo/2020.1.406/kendo.draganddrop.min.js'|path}}"></script>
    <script src="{{'/js/vendor/kendo/2020.1.406/kendo.popup.min.js'|path}}"></script>
    <script src="{{'/js/vendor/kendo/2020.1.406/kendo.window.min.js'|path}}"></script>
</head>
<body class="afw-pattern-lab">
    {% render '@site-header' %}
	<main>{{yield|safe}}</main>
    {% render '@back-to-top' %}
    {% render '@site-footer' %}
    <script src="{{'/js/all.js'|path}}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.0/axe.min.js"></script>
	<script>
    	var output = ''
		var outputHtmlEscape = {
			'&': '&amp;',
			'<': '&lt;',
			'>': '&gt;',
		}
		axe
			.run({
				fromFrames: ['iframe', {
					fromShadowDOM: ['.site-header']
				}]
			})
			.then(function (res) {
				//console.log(res)
				if (res.violations.length) {
					res.violations.forEach(function (violation) {
						var emoji = '😰';
						switch (violation.impact) {
							case 'critical':
							emoji = '😱'
							break;
							case 'serious':
							emoji = '😨'
							break;
						}
						output += `<div>
						<p>${emoji}<strong>${violation.help}</strong><br/><strong>${violation.impact}</strong> ${violation.tags ? violation.tags.filter(function (el, _i) { return el.startsWith('wcag') }).join(', ') : ''}<br/><small><a href="${violation.helpUrl}" target="_blank">${violation.helpUrl}</a></small></p>`
						violation.nodes.forEach(function (node) {
							output += `<p>${node.failureSummary}</p>`
							output += `<div><pre style="background:white;border-radius:4px;border:1px solid lightgrey;margin-bottom:8px;">${node.html.replace(/[&<>]/g, function(tag) {
								return outputHtmlEscape[tag] || tag
							})}</pre><div style="display:inline-block;font-size:13px;border-radius:4px;border: 1px solid lightgray;padding:2px;user-select:all;">$('${node.target.join()}')</div></div><hr/>`
						})
						output += `</div>`
						//console.log(violation)
					})

					parent.document.querySelector('.a11y-output').innerHTML = output
				}
			})
			.catch(function (_err) {})
	</script>
</body>
</html>
 
/* No context defined. */

No notes defined.