E3 Alliance Pattern Library

Footer 

<div class="footer">
    <div class="footer__top-container">
        <div class="footer__top-content">
            <ul class="footer__links-list">
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Our Work

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Services

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Services

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Invest

                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_blank">
                        About

                        <svg class="external-link" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path class="_mark external-link__shape" d="M12.75 10.75C13.3145 10.75 13.8125 11.248 13.8125 11.8125V15C13.8125 16.1953 12.8496 17.125 11.6875 17.125H2.125C0.929688 17.125 0 16.1953 0 15V5.4375C0 4.27539 0.929688 3.3125 2.125 3.3125H5.3125C5.87695 3.3125 6.375 3.81055 6.375 4.375C6.375 4.97266 5.87695 5.4375 5.3125 5.4375H2.125V15H11.6875V11.8125C11.6875 11.248 12.1523 10.75 12.75 10.75ZM16.668 0.457031C16.8672 0.65625 17 0.921875 17 1.1875V6.5C17 7.09766 16.4355 7.5625 15.9043 7.5625C15.3398 7.5625 14.875 7.09766 14.875 6.5V3.77734L7.4375 11.2812C7.00586 11.7129 6.3418 11.7129 5.91016 11.2812C5.51172 10.8828 5.51172 10.2188 5.91016 9.78711L13.3809 2.2168H10.625C10.0605 2.2168 9.5625 1.75195 9.5625 1.1875C9.5625 0.623047 10.0273 0.125 10.625 0.125H15.9375C16.2031 0.125 16.4688 0.257812 16.668 0.457031Z" fill="#88C965" />
                        </svg>
                    </a>
                </li>
                <li class="footer__links-list-item">
                    <a href="#" class="footer__links-list-item-link" target="_self">
                        Careers

                    </a>
                </li>
            </ul>
            <div class="footer__information">
                <div class="footer__contact-address">
                    <div class="footer__label">Address</div>
                    <a target="_blank" href="https://maps.google.com/maps?q=5930%20Middle%20Fiskville%20Road%0ASuite%20414%0AAustin%2C%20Texas%2078752" class="footer__address">
                        5930 Middle Fiskville Road<br />
                        Suite 414<br />
                        Austin, Texas 78752
                    </a>
                </div>
                <nav class="footer__social" aria-label="footer social media links">
                    <div class="footer__label">Stay Connected</div>
                    <ul class="social-links">
                        <li class="social-links__item">
                            <a href="https://facebook.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Facebook page for E3 Alliance
                                </span>
                                <svg class="facebook" aria-label="Facebook" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="facebook__logo" d="M18.4152 0.375C19.6122 0.375 20.625 1.38783 20.625 2.58482V18.7902C20.625 20.0332 19.6122 21 18.4152 21H12.0619V14.0022H14.7321L15.2386 10.6875H12.0619V8.56975C12.0619 7.649 12.5223 6.77427 13.9495 6.77427H15.3767V3.96596C15.3767 3.96596 14.0876 3.73577 12.7985 3.73577C10.2204 3.73577 8.51702 5.3471 8.51702 8.20145V10.6875H5.61663V14.0022H8.51702V21H2.20982C0.966797 21 0 20.0332 0 18.7902V2.58482C0 1.38783 0.966797 0.375 2.20982 0.375H18.4152Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://instagram.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Instagram account for E3 Alliance
                                </span>
                                <svg class="instagram" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="instagram__camera" d="M10.5781 8.32143C11.8728 8.32143 12.9442 9.39286 12.9442 10.6875C12.9442 11.1339 12.8103 11.5357 12.6317 11.8929C11.6942 13.5 9.41741 13.5 8.47991 11.8929C7.58705 10.3304 8.70312 8.32143 10.5781 8.32143ZM16.1138 6.49107C16.5156 7.42857 16.4263 9.66072 16.4263 10.6875C16.4263 11.7589 16.5156 13.9911 16.1138 14.9286C15.8906 15.5536 15.3996 16.0446 14.7746 16.2679C13.8371 16.6696 11.6049 16.5804 10.5781 16.5804C9.5067 16.5804 7.27455 16.6696 6.33705 16.2679C5.71205 16.0446 5.22098 15.5536 4.99777 14.9286C4.64062 13.9911 4.68527 11.7589 4.68527 10.6875C4.68527 9.66072 4.64062 7.42857 4.99777 6.49107C5.22098 5.86607 5.71205 5.375 6.33705 5.15179C7.27455 4.75 9.5067 4.83929 10.5781 4.83929C11.6049 4.83929 13.8371 4.75 14.7746 5.15179C15.3996 5.375 15.8906 5.86607 16.1138 6.49107ZM10.5781 14.3482C12.5871 14.3929 14.2388 12.7411 14.2388 10.6875C14.2388 10.0625 14.0603 9.4375 13.7478 8.85714C12.3192 6.44643 8.79241 6.44643 7.36384 8.85714C5.97991 11.3125 7.72098 14.3482 10.5781 14.3482ZM14.3728 7.74107C14.8192 7.74107 15.221 7.38393 15.221 6.89286C15.221 6.75893 15.1763 6.58036 15.0871 6.44643C14.7746 5.91071 13.971 5.91071 13.6138 6.44643C13.3013 7.02679 13.7031 7.74107 14.3728 7.74107ZM18.4353 0.6875C19.596 0.6875 20.5781 1.66964 20.5781 2.83036V18.5446C20.5781 19.75 19.596 20.6875 18.4353 20.6875H2.72098C1.51563 20.6875 0.578125 19.75 0.578125 18.5446V2.83036C0.578125 1.66964 1.51563 0.6875 2.72098 0.6875H18.4353ZM17.6317 13.6339C17.721 12.4732 17.721 8.94643 17.6317 7.78571C17.5871 6.625 17.3192 5.59821 16.5156 4.79464C15.6674 3.94643 14.6406 3.67857 13.5246 3.63393C12.3192 3.54464 8.79241 3.54464 7.6317 3.63393C6.47098 3.67857 5.4442 3.94643 4.64062 4.75C3.79241 5.59821 3.52455 6.625 3.47991 7.74107C3.39063 8.94643 3.39063 12.4732 3.47991 13.6339C3.52455 14.7946 3.79241 15.8214 4.64062 16.625C5.4442 17.4732 6.47098 17.7411 7.6317 17.7857C8.79241 17.875 12.3192 17.875 13.5246 17.7857C14.6406 17.7411 15.6674 17.4732 16.5156 16.625C17.3192 15.8214 17.5871 14.7946 17.6317 13.6339Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://linkedin.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Linked in profile for E3 Alliance
                                </span>
                                <svg class="linkedin" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="linkedin__logo" d="M19.1007 0.6875C19.8597 0.6875 20.5293 1.35714 20.5293 2.16071V19.2589C20.5293 20.0625 19.8597 20.6875 19.1007 20.6875H1.91323C1.1543 20.6875 0.529297 20.0625 0.529297 19.2589V2.16071C0.529297 1.35714 1.1543 0.6875 1.91323 0.6875H19.1007ZM6.55608 17.8304V8.32143H3.60965V17.8304H6.55608ZM5.08287 6.98214C6.02037 6.98214 6.7793 6.22321 6.7793 5.28571C6.7793 4.34821 6.02037 3.54464 5.08287 3.54464C4.10073 3.54464 3.3418 4.34821 3.3418 5.28571C3.3418 6.22321 4.10073 6.98214 5.08287 6.98214ZM17.6722 17.8304V12.6071C17.6722 10.0625 17.0918 8.05357 14.1007 8.05357C12.6722 8.05357 11.69 8.85714 11.2882 9.61607H11.2436V8.32143H8.43108V17.8304H11.3775V13.1429C11.3775 11.8929 11.6007 10.6875 13.1632 10.6875C14.6811 10.6875 14.6811 12.1161 14.6811 13.1875V17.8304H17.6722Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://pinterest.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Flickr profile for E3 Alliance
                                </span>
                                <svg class="pinterest" aria-label="Pinterest" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="pinterest__logo" d="M20.4824 2.83036V18.5446C20.4824 19.75 19.5003 20.6875 18.3396 20.6875H7.35742C7.80385 19.9732 8.33957 18.9018 8.56278 18.0536C8.69671 17.5625 9.27707 15.4643 9.27707 15.4643C9.63421 16.1339 10.661 16.7143 11.7771 16.7143C15.0806 16.7143 17.4467 13.6786 17.4467 9.88393C17.4467 6.26786 14.5003 3.54464 10.7056 3.54464C5.97349 3.54464 3.47349 6.75893 3.47349 10.1964C3.47349 11.8036 4.32171 13.8125 5.70564 14.4375C5.88421 14.5268 6.01814 14.4821 6.06278 14.3036C6.10742 14.125 6.28599 13.4107 6.37528 13.0536C6.37528 12.9643 6.37528 12.8304 6.28599 12.7411C5.83956 12.2054 5.48242 11.1786 5.48242 10.2411C5.48242 7.83036 7.31278 5.46429 10.3931 5.46429C13.1164 5.46429 14.9914 7.33929 14.9914 9.92857C14.9914 12.9196 13.5181 14.9732 11.5539 14.9732C10.4824 14.9732 9.67885 14.0804 9.90207 12.9643C10.2146 11.6696 10.8396 10.2857 10.8396 9.34822C10.8396 6.98214 7.44671 7.29464 7.44671 10.4643C7.44671 11.4018 7.80385 12.0714 7.80385 12.0714C6.37528 18.0089 6.15206 18.0982 6.46456 20.6875H6.55385H2.62528C1.41992 20.6875 0.482422 19.75 0.482422 18.5446V2.83036C0.482422 1.66964 1.41992 0.6875 2.62528 0.6875H18.3396C19.5003 0.6875 20.4824 1.66964 20.4824 2.83036Z" fill="white" />
                                </svg>
                            </a>
                        </li>

                        <li class="social-links__item">
                            <a href="https://twitter.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Twitter account for E3 Alliance
                                </span>
                                <svg class="twitter" width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="twitter__bird" d="M17.8567 0.6875H21.2509L13.8374 9.15865L22.5586 20.6875H15.7317L10.3807 13.6971L4.26532 20.6875H0.866286L8.79417 11.625L0.433594 0.6875H7.43359L12.2653 7.07692L17.8567 0.6875ZM16.6644 18.6587H18.5442L6.40955 2.61058H4.39032L16.6644 18.6587Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                        <li class="social-links__item">
                            <a href="https://youtube.com" class="social-links__item-link">
                                <span class="social-links__item-text">
                                    Youtube account for E3 Alliance
                                </span>
                                <svg class="youtube" width="29" height="21" viewBox="0 0 29 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path class="youtube__play-button" d="M28.3763 3.86458C29.0013 6.05208 29.0013 10.7396 29.0013 10.7396C29.0013 10.7396 29.0013 15.375 28.3763 17.6146C28.0638 18.8646 27.0742 19.8021 25.8763 20.1146C23.6367 20.6875 14.7826 20.6875 14.7826 20.6875C14.7826 20.6875 5.8763 20.6875 3.63672 20.1146C2.4388 19.8021 1.44922 18.8646 1.13672 17.6146C0.511719 15.375 0.511719 10.7396 0.511719 10.7396C0.511719 10.7396 0.511719 6.05208 1.13672 3.86458C1.44922 2.61458 2.4388 1.625 3.63672 1.3125C5.8763 0.6875 14.7826 0.6875 14.7826 0.6875C14.7826 0.6875 23.6367 0.6875 25.8763 1.3125C27.0742 1.625 28.0638 2.61458 28.3763 3.86458ZM11.8659 14.9583L19.2617 10.7396L11.8659 6.52083V14.9583Z" fill="white" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="footer__contact">
                <div class="footer__contact-phone-and-email">
                    <div class="footer__label">Phone</div>
                    <a href="tel:512-223-7241" class="footer__contact-phone">
                        512-223-7241
                    </a>
                    <br>
                    <div class="footer__label">Email</div>
                    <a href="mailto:info@e3alliance.org" class="footer__contact-email">
                        info@e3alliance.org
                    </a>
                </div>
            </div>

        </div>
    </div>
    <div class="footer__bottom-container">
        <div class="footer__bottom-content">
            <div class="footer__brand">
                <a class="footer__brand-link" href="/"><span class="footer__brand-title" aria-label="E3 Alliance">E3 Alliance</span><svg xmlns="http://www.w3.org/2000/svg" width="223" height="32" aria-hidden="true">
                        <g clip-path="url(#a)">
                            <path fill="white" d="m0 24.634 6.643 6.654h16.552v-6.654H8.109V19.07h15.086v-6.454H8.109v-5.12h15.086V.843H0v23.792ZM43.568 13.016l5.132-5.52L42.057.843H27.882v6.655h11.975l-5.42 5.875v5.43h3.599c3.088 0 4.643.98 4.643 2.96 0 1.002-.444 1.803-1.31 2.337-.867.557-2.045.824-3.511.824-1.444 0-2.91-.223-4.421-.645a14.82 14.82 0 0 1-4.022-1.87l-3.066 6.476c1.533.957 3.355 1.692 5.444 2.226 2.11.534 4.22.779 6.354.779 2.91 0 5.376-.467 7.354-1.424 1.977-.957 3.465-2.181 4.42-3.717.978-1.536 1.445-3.205 1.445-5.008 0-2.203-.667-4.072-2.022-5.63-1.31-1.536-3.244-2.56-5.776-3.094ZM100.532.842h-5.265v30.446h5.265V.842ZM73.96.842 60.676 31.288h5.443l3.11-7.3h14.264l3.066 7.3h5.598L78.871.842h-4.91Zm-2.799 18.45 5.177-12.085 5.22 12.085H71.162ZM116.195 31.288h5.244V10.991l-5.244-5.275v25.572ZM121.439.842h-5.244l5.244 5.275V.842ZM135.147 8.142c-1.867 0-3.466.178-4.777.512a25.282 25.282 0 0 0-3.888 1.38l1.422 4.184c1.044-.423 2.044-.78 3.066-1.046 1-.267 2.155-.379 3.443-.379 1.8 0 3.2.423 4.155 1.247.955.846 1.444 2.047 1.444 3.628v.422a22.044 22.044 0 0 0-2.777-.69c-.955-.178-2.133-.267-3.51-.267-1.311 0-2.555.156-3.688.445-1.133.312-2.111.757-2.933 1.38a6.302 6.302 0 0 0-1.911 2.337c-.466.935-.688 2.048-.688 3.294v.089c0 1.157.222 2.159.666 3.05a6.866 6.866 0 0 0 1.778 2.202 7.184 7.184 0 0 0 2.554 1.336c.978.311 2.022.445 3.111.445 1.733 0 3.199-.312 4.399-.957 1.2-.623 2.199-1.402 2.977-2.337v2.804h5.177V17.78c0-3.05-.822-5.43-2.467-7.1-1.644-1.691-4.154-2.537-7.553-2.537Zm4.954 14.89c0 .711-.155 1.379-.444 1.958-.311.6-.733 1.09-1.267 1.513-.555.423-1.177.734-1.91.98a8.223 8.223 0 0 1-2.4.355c-1.244 0-2.288-.289-3.132-.868-.845-.578-1.267-1.402-1.267-2.514v-.09c0-1.09.467-1.958 1.378-2.581.911-.623 2.199-.957 3.843-.957 1 0 1.955.089 2.866.267.911.178 1.689.378 2.355.645v1.291h-.022ZM161.674 8.009c-.889 0-1.689.111-2.377.334-.689.222-1.356.511-1.933.89-.578.378-1.111.801-1.556 1.29-.444.49-.844 1.002-1.221 1.536V8.476h-5.266v22.812h5.266V18.447c0-1.78.466-3.16 1.399-4.162.933-1.002 2.155-1.491 3.666-1.491 1.533 0 2.733.49 3.577 1.446.844.957 1.266 2.337 1.266 4.118v12.93h5.266v-14.51c0-2.671-.711-4.808-2.111-6.388-1.4-1.58-3.399-2.381-5.976-2.381ZM188.134 26.481c-.933.534-2.021.801-3.243.801-1 0-1.933-.2-2.755-.579a6.374 6.374 0 0 1-2.155-1.58 7.266 7.266 0 0 1-1.4-2.337c-.333-.89-.489-1.847-.489-2.848v-.09c0-.979.156-1.913.489-2.803.333-.89.778-1.67 1.355-2.315a6.847 6.847 0 0 1 2.067-1.558 6.103 6.103 0 0 1 2.621-.579c1.311 0 2.444.268 3.333.802.911.534 1.755 1.224 2.555 2.047l3.243-3.494a12.617 12.617 0 0 0-3.732-2.849c-1.422-.712-3.222-1.09-5.377-1.09-1.688 0-3.266.311-4.732.957a11.726 11.726 0 0 0-3.755 2.56 11.255 11.255 0 0 0-2.466 3.805c-.599 1.447-.888 2.982-.888 4.607v.089c0 1.602.289 3.138.888 4.584a11.757 11.757 0 0 0 2.466 3.762 12.066 12.066 0 0 0 3.733 2.537c1.444.623 2.999.935 4.71.935 2.222 0 4.043-.401 5.465-1.18a14.619 14.619 0 0 0 3.844-3.093l-3.155-3.116c-.8.8-1.666 1.49-2.622 2.025ZM214.751 11.681a9.818 9.818 0 0 0-3.4-2.67c-1.355-.668-2.955-1.002-4.754-1.002-1.644 0-3.133.311-4.488.935a10.848 10.848 0 0 0-3.51 2.537c-1 1.09-1.755 2.337-2.311 3.783-.555 1.447-.822 2.982-.822 4.63v.088c0 1.759.311 3.36.911 4.808.6 1.446 1.422 2.693 2.488 3.739 1.044 1.046 2.289 1.847 3.711 2.425 1.421.579 2.954.868 4.598.868 2.089 0 3.911-.378 5.421-1.157 1.511-.779 2.8-1.825 3.911-3.116l-3.066-2.715c-.911.89-1.844 1.58-2.8 2.025-.955.468-2.066.69-3.354.69-1.689 0-3.133-.49-4.333-1.49-1.199-1.002-1.933-2.427-2.221-4.296h16.729c.022-.267.044-.512.067-.757.022-.245.022-.49.022-.712 0-1.647-.222-3.205-.689-4.696-.511-1.491-1.2-2.782-2.11-3.917Zm-14.108 6.61c.222-1.78.866-3.227 1.91-4.34 1.045-1.113 2.378-1.67 3.977-1.67.867 0 1.622.157 2.311.468a5.557 5.557 0 0 1 1.755 1.269 6.002 6.002 0 0 1 1.155 1.891c.289.735.467 1.514.556 2.36h-11.664v.022ZM218.461 9.566a.919.919 0 0 0-.289-.178 4.136 4.136 0 0 0-.4-.133c-.133-.022-.244-.067-.333-.09-.089-.021-.156-.066-.222-.088-.045-.045-.089-.067-.112-.111-.022-.045-.022-.09-.022-.156 0-.09.045-.178.134-.245.088-.067.2-.09.355-.09.133 0 .267.023.4.068a1.8 1.8 0 0 1 .4.222l.266-.378a2.089 2.089 0 0 0-.488-.267 1.58 1.58 0 0 0-.578-.09c-.133 0-.267.023-.4.068-.111.044-.222.089-.311.178a.61.61 0 0 0-.2.267.904.904 0 0 0-.067.333.75.75 0 0 0 .067.334.994.994 0 0 0 .178.245c.089.067.178.111.311.156.111.044.267.089.422.111.133.022.244.067.333.09.089.021.156.066.2.088.045.045.089.067.089.111.022.045.022.09.022.134 0 .111-.044.2-.133.267-.089.067-.222.09-.378.09-.177 0-.355-.023-.488-.09a1.309 1.309 0 0 1-.423-.29l-.311.357c.178.156.356.267.578.356.2.067.422.111.644.111.156 0 .289-.022.422-.066.134-.045.245-.09.334-.179a.893.893 0 0 0 .222-.267.933.933 0 0 0 .067-.356.718.718 0 0 0-.067-.311c-.089-.045-.156-.134-.222-.2ZM221.638 8.053l-.889 1.38-.889-1.38h-.533v2.893h.489v-2.07l.911 1.358h.022l.911-1.357v2.07h.511V8.053h-.533ZM110.974.842h-5.265v30.446h5.265V.842Z" />
                        </g>
                        <defs>
                            <clipPath id="a">
                                <path fill="white" d="M0 .842h222.171V32H0z" />
                            </clipPath>
                        </defs>
                    </svg>
                </a>
            </div>
            <div class="footer__copyright">&copy; 2024 E3 Alliance All rights reserved. <a href="#">Privacy Policy</a></div>
        </div>
    </div>
</div>
 
<div class="footer">
    <div class="footer__top-container">
        <div class="footer__top-content">
                <ul class="footer__links-list">
                    {% for item in footerLinks.items %}
                        <li class="footer__links-list-item">
                            <a href="{{ item.url }}" class="footer__links-list-item-link" target="{{ item.isExternal ? '_blank' : '_self' }}">
                                {{ item.title }}

                                {% if item.isExternal %}
                                    {% include 'bits/icons/external-link.twig' %}
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
                <div class="footer__information">
                    {% if contactInfo.address %}
                        <div class="footer__contact-address">
                            <div class="footer__label">Address</div>
                            <a target="_blank"
                               href="https://maps.google.com/maps?q={{ contactInfo.address|url_encode }}"
                               class="footer__address">
                                {{ contactInfo.address|nl2br }}
                            </a>
                        </div>
                    {% endif %}
                    {% if
                        contactInfo.facebookLink or
                        contactInfo.instagramLink or
                        contactInfo.linkedInLink or
                        contactInfo.pinterest or
                        contactInfo.twitterLink or
                        contactInfo.youTubeLink
                    %}
                        <nav class="footer__social" aria-label="footer social media links">
                            <div class="footer__label">Stay Connected</div>
                            {% include 'bits/social-links/social-links.twig' %}
                        </nav>
                    {% endif %}
                </div>
                <div class="footer__contact">
                    {% if contactInfo.phone or contactInfo.email %}
                        <div class="footer__contact-phone-and-email">
                            {% if contactInfo.phone %}
                                <div class="footer__label">Phone</div>
                                <a href="tel:{{ contactInfo.phone }}" class="footer__contact-phone">
                                    {{ contactInfo.phone }}
                                </a>
                            {% endif %}
                            <br>
                            {% if contactInfo.email %}
                                <div class="footer__label">Email</div>
                                <a href="mailto:{{ contactInfo.email }}" class="footer__contact-email">
                                    {{ contactInfo.email }}
                                </a>
                            {% endif %}
                        </div>
                    {% endif %}
                </div>

            </div>
    </div>
    <div class="footer__bottom-container">
        <div class="footer__bottom-content">
            <div class="footer__brand">
                <a class="footer__brand-link" href="/" ><span class="footer__brand-title" aria-label="{{ site.name }}">{{ site.name }}</span>{% include 'bits/icons/footer-logo.twig' %}</a>
            </div>
            <div class="footer__copyright">&copy; {{ 'now' | date('Y') }} {{site.name}} All rights reserved. {{ contactInfo.copyright }}</div>
        </div>
    </div>
</div>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "contactInfo": {
    "phone": "512-223-7241",
    "email": "info@e3alliance.org",
    "address": "5930 Middle Fiskville Road\nSuite 414\nAustin, Texas 78752",
    "copyright": "<a href=\"#\">Privacy Policy</a>",
    "facebookLink": "https://facebook.com",
    "pinterestLink": "https://pinterest.com",
    "linkedInLink": "https://linkedin.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youtubeLink": "https://youtube.com"
  },
  "footerLinks": {
    "items": [
      {
        "title": "Our Work",
        "url": "#"
      },
      {
        "title": "Services",
        "url": "#"
      },
      {
        "title": "Services",
        "url": "#"
      },
      {
        "title": "Invest",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "isExternal": true
      },
      {
        "title": "Careers",
        "url": "#"
      }
    ]
  }
}
  • Content: 
    breakpointSmall = 856px
breakpointLarge = 1300px

.footer
    --backgroundColor sapphire
    --iconbackgroundColor white
    --listLinkTextColorActive greenApple
    --listLinkTextColor white

    background-color var(--backgroundColor)

    &__top-content
    &__bottom-content
        @extends $contentContainer

    &__top-wrapper
        display flex

    &__top-content
        padding-top 48px
        padding-bottom 48px

        +above(breakpointSmall)
            display flex
            flex 3

    &__brand
        margin-bottom 16px
        cursor pointer

        svg
            path
                fill var(--iconbackgroundColor)

        +above(breakpointSmall)
            flex 0 0 100%

        +above(breakpointLarge)
            flex 1

    &__brand-link
        &:hover
        &:focus
        &:active
            svg
                path
                    fill var(--listLinkTextColorActive)

    &__brand-title
        @extends $visually-hidden

    &__contact-address
        &:hover
        &:focus
        &:active
            color greenApple

        +above(breakpointSmall)
            padding-right 32px
            flex 1

    &__contact-phone-and-email
        +above(breakpointSmall)
            flex 1

    &__contact-address
    &__contact-phone-and-email
        font-weight 600
        font-size 18px
        color white
        margin-bottom 24px
        margin-right 32px
        border-top solid 2px var(--borderColor)

        +below(breakpointSmall)
            margin-right 0


    &__links
        +above(breakpointSmall)
            padding-right 32px
            flex 1

    &__copyright
        font-size 18px
        color white

        a
            &:hover
            &:focus
            &:active
                color greenApple

    &__label
        font-size 20px
        font-weight 600
        color greenApple

    &__contact
        display flex
        flex 1

    &__contact-phone
    &__contact-email
        display inline-block

        &:hover
        &:focus
        &:active
            color greenApple

    &__contact-phone
        margin-bottom 24px

    &__information
        flex-direction column
        flex-wrap wrap

        +above(breakpointSmall)
            flex 4
            margin-bottom 48px

        +above(breakpointLarge)
            flex 2
            align-content flex-start

    &__social
        margin-bottom 16px

    &__links-list
        display flex
        flex-direction column
        flex 6
        margin-bottom 24px

        +above(breakpointSmall)
            margin-bottom 48px

    &__links-list-item:not(:last-child)
        margin-bottom 16px

    &__links-list-item-link
        color var(--listLinkTextColor)
        font-size 18px
        font-weight 600
        text-decoration underline

        svg
            width 21px
            height 21px
            vertical-align text-bottom
            margin-left 5px
            margin-bottom 2px

            path
                fill var(--listLinkTextColor)

        &:focus
        &:hover
        &:active
            color var(--listLinkTextColorActive)

            svg
                path
                    fill var(--listLinkTextColorActive)

    &__bottom-container
        background-color darkSapphire
        padding-bottom 24px
        padding-top 24px
  • URL: /components/raw/footer/footer.styl
  • Filesystem Path: patterns/partials/footer/footer.styl
  • Size: 3.3 KB

No notes defined.