<div class="page-wrapper">

    <header class="header ">
        <div class="container">
            <div class="header__wrapper">
                <a class="logo header__logo" href="/components/preview/home" aria-label="Homepage">
                    <img class="logo__image " src="/images/logo/logo.svg" alt="Solarwood Logo">
                </a>

                <div class="header__buttons">
                    <div class="header__switchers">
                        <div id="dropdown-default" class="dropdown-list dropdown-list--detailed-content">
                            <ul class="dropdown-list__list">
                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content">
                                        dropdown title

                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                            <title>Arrow Down</title>
                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                        </svg>

                                    </a>

                                    <div id="dropdown-detailed-content" class="dropdown-list__content " aria-hidden="true">
                                        <ul class="list ">
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                            <li class="list__item ">
                                                Lorem ipsum

                                            </li>
                                        </ul>

                                    </div>
                                </li>
                            </ul>
                        </div>

                        <script type="text/javascript">
                            new DropdownList(document.getElementById('dropdown-default'));
                        </script>

                    </div>
                    <div class="side-menu ">
                        <button class="button button--icon modal-trigger button--rotate-icon side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
                            <svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
                                <title>Mobile-menu</title>
                                <use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
                            </svg>

                        </button>

                        <div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
                            <div role="document" class="modal__container side-menu__container" tabindex="0">
                                <div class="modal__content side-menu__content">

                                    <div class="modal__middle side-menu__content-middle">

                                        <div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
                                            <ul class="dropdown-list__list">
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
                                                        dropdown title

                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                            <title>Arrow Down</title>
                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                        </svg>

                                                    </button>

                                                    <div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
                                                                                        sublist item name

                                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                                            <title>Arrow Down</title>
                                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                                        </svg>

                                                                                    </a>

                                                                                    <div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
                                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                                            <ul class="dropdown-list__list">
                                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                                    <a class="dropdown-list__label " href="#">
                                                                                                        sub sublist item name

                                                                                                    </a>

                                                                                                </li>
                                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                                    <a class="dropdown-list__label " href="#">
                                                                                                        sub sublist item name

                                                                                                    </a>

                                                                                                </li>
                                                                                            </ul>
                                                                                        </div>

                                                                                    </div>
                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
                                                        dropdown title

                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                            <title>Arrow Down</title>
                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                        </svg>

                                                    </a>

                                                    <div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
                                                        dropdown title

                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                            <title>Arrow Down</title>
                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                        </svg>

                                                    </a>

                                                    <div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        Item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
                                                                        Item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
                                                                        item name

                                                                        <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                                                            <title>Arrow Down</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                                        </svg>

                                                                    </a>

                                                                    <div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sublist item name

                                                                                    </a>

                                                                                </li>
                                                                            </ul>
                                                                        </div>

                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                </li>
                                            </ul>
                                        </div>

                                        <script type="text/javascript">
                                            new DropdownList(document.getElementById('dropdown-default'));
                                        </script>

                                    </div>

                                    <div class="modal__bottom side-menu__content-bottom">
                                        <div class="modal__bottom-actions side-menu__bottom-actions">
                                            <div class="
                                    modal__bottom-action
                                    side-menu__bottom-action
                                ">
                                                <div class="contact-bar contact-bar--vertical">
                                                    <div class="contact-bar__container ">
                                                        <ul class="list contact-bar__list contact-bar__list--icons">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Account
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Klantenservice
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="list-item contact-bar__item">
                                                                <a href="#" class="
                            contact-bar__link
                            
                        ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <use xlink:href="/images/icons-sprite.svg#undefined"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                                button__text
                                contact-bar__text
                            ">
                                                                        Groothandel
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                        <ul class="list contact-bar__list contact-bar__list--icons">
                                                            <li class="list-item contact-bar__item">
                                                                <a href="tel:+31858772604" class="
                        contact-bar__link
                        
                    ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Phone</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#phone"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                            button__text
                            contact-bar__text
                        ">
                                                                        T: 085 - 877 26 04
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="contact-bar__item">
                                                                <a href="mailto:info@solarwood.nl" class="
                        contact-bar__link
                        
                    ">
                                                                    <span class="
                            icon
                            contact-bar__icon
                        " aria-label="">
                                                                        <svg class="icon " role="img">
                                                                            <title>Email</title>
                                                                            <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                                                                        </svg>

                                                                    </span>
                                                                    <span class="
                            button__text
                            contact-bar__text
                        ">
                                                                        E-mail
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
                                    <svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
                                        <title>Close</title>
                                        <use xlink:href="/images/icons-sprite.svg#close"></use>
                                    </svg>

                                </button>

                            </div>
                        </div>
                        <script type="text/javascript">
                            new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
                        </script>

                    </div>

                    <svg class="icon octagon" role="presentation" focusable="false">
                        <title>octagon</title>
                        <use xlink:href="/images/icons-sprite.svg#octagon"></use>
                    </svg>

                </div>

            </div>
        </div>
    </header>

    <div class="hero hero--primary">
        <div class="hero__wrapper" style="background-image: url('')">
            <div class="hero__text container">
                <h1 class="hero__text--heading--first">
                    <span>Receive updates or want to get in touch?</span>
                </h1>
                <h4 class="hero__text--heading--second">
                    We combine the best of both worlds
                </h4>
                <a class="button button--transparent border-white rounded-w25" href="#" title="Start exploring">
                    Start exploring
                </a>

            </div>
            <button class="button " type="button" aria-label="button">
                I am a button
            </button>

        </div>
    </div>

    <main id="maincontent" class="container">
        <nav class="breadcrumbs " aria-label="" role="navigation">
            <ol class="breadcrumbs__list ">
                <li class="breadcrumbs__item">
                    <a href="#" class="breadcrumbs__link">
                        Home
                    </a>
                </li>
                <li class="breadcrumbs__item" aria-current="true">
                    Contact Us
                </li>
            </ol>
        </nav>

        <h1 class="margin-top-sm text-center">
            Send us an email
        </h1>

        <div class="row contact-us">
            <div class="col-xs-12 col-lg-6">
                <p class="contact-us__description">
                    Please fill out the form below. We&#x27;re here to answer all of your questions and recommend the best products that will help you achieve your specific goals! We look forward to working with you!
                </p>
                <form class="conact-us__form">
                    <fieldset class="fieldset">
                        <legend class="contact-us__legend">
                            General
                        </legend>
                        <div class="select ">
                            <label class="
            label
            label--hidden
        " for="select-1">
                                Choose from options below
                            </label>
                            <select id="select-1" class="select__field " name="select-1">
                                <option class="" value="option1">
                                    Choose from options below
                                </option>
                                <option class="" value="option2">
                                    Option 2
                                </option>
                                <option class="" value="option3" disabled>
                                    Option 3
                                </option>
                            </select>
                        </div>

                        <script src="/components/raw/select/select.js"></script>

                        <div class="input ">
                            <label class="
            label
            input__label
            
        " for="input-1">
                                First name
                            </label>
                            <input class="input__field " id="input-1" name="input-1" type="text" placeholder="" required>
                        </div>

                        <div class="input ">
                            <label class="
            label
            input__label
            
        " for="input-2">
                                Last name
                            </label>
                            <input class="input__field " id="input-2" name="input-2" type="text" placeholder="" required>
                        </div>

                        <div class="input ">
                            <label class="
            label
            input__label
            
        " for="input-3">
                                Email
                            </label>
                            <input class="input__field " id="input-3" name="input-3" type="text" placeholder="" required autocomplete="email">
                        </div>

                        <div class="input ">
                            <label class="
            label
            input__label
            
        " for="input-4">
                                Phone
                            </label>
                            <input class="input__field " id="input-4" name="input-4" type="text" placeholder="" autocomplete="tel">
                        </div>

                        <div class="input ">
                            <label class="
            label
            input__label
            
        " for="input-5">
                                Comment / Questions
                            </label>

                            <textarea class="input__field input__field--textarea " id="input-5" name="input-5" placeholder=""></textarea>
                        </div>

                    </fieldset>
                    <button class="button contact-us__button" type="submit">
                        Submit message
                    </button>

                    <p class="contact-us__tips">
                        Fields marked * are mandatory
                    </p>
                </form>
            </div>
            <div class="
                    col-xs-12
                    col-lg-6
                    contact-us__details
                ">
                <div class="contact-us__phone">
                    <h2 class="contact-us__heading">
                        Call us
                    </h2>

                    <span class="contact-us__phone-number">
                        800 - 123 - 4567
                    </span>
                </div>
                <div class="contact-us__address">
                    <h2 class="contact-us__heading">
                        Warehouse &amp; office address
                    </h2>

                    <p class="contact-us__address-item">
                        Alpaca
                    </p>
                    <p class="contact-us__address-item">
                        442 Route 206 Montague NJ, 07827
                    </p>
                </div>
                <h2 class="contact-us__heading">
                    Store hours
                </h2>

                <ul class="contact-us__list">
                    <li class="contact-us__list-item">
                        <span class="contact-us__day ">
                            Monday
                        </span>
                        <span class="contact-us__hour ">
                            10 A.M EST - 7 P.M. EST
                        </span>
                    </li>
                    <li class="contact-us__list-item">
                        <span class="contact-us__day ">
                            Tuesday
                        </span>
                        <span class="contact-us__hour ">
                            10 A.M EST - 7 P.M. EST
                        </span>
                    </li>
                    <li class="contact-us__list-item">
                        <span class="contact-us__day ">
                            Wednesday
                        </span>
                        <span class="contact-us__hour ">
                            10 A.M EST - 7 P.M. EST
                        </span>
                    </li>
                    <li class="contact-us__list-item">
                        <span class="contact-us__day ">
                            Thursday
                        </span>
                        <span class="contact-us__hour ">
                            10 A.M EST - 7 P.M. EST
                        </span>
                    </li>
                    <li class="contact-us__list-item">
                        <span class="contact-us__day ">
                            Friday
                        </span>
                        <span class="contact-us__hour ">
                            10 A.M EST - 7 P.M. EST
                        </span>
                    </li>
                    <li class="contact-us__list-item">
                        <span class="contact-us__day ">
                            Saturday
                        </span>
                        <span class="contact-us__hour ">
                            10 A.M EST - 5 P.M. EST
                        </span>
                    </li>
                    <li class="contact-us__list-item">
                        <span class="contact-us__day contact-us__day--special">
                            Sunday
                        </span>
                        <span class="contact-us__hour contact-us__hour--special">
                            Closed
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </main>
</div>

<footer>
    <div class="footer-top margin-top-xl">
        <div class="newsletter__footer ">

            <div class="newsletter__content">
                <div class="newsletter__footer--heading ">
                    <h2 class="newsletter__footer--title">
                        Wil je 10% korting op je volgende bestelling?
                    </h2>
                    <p class="newsletter__footer--subtitle">
                        Meld je nu aan voor de nieuwsbrief van solarwood en ontvang 10% korting op je volgende aankoop.
                    </p>
                </div>
                <form class="newsletter__form newsletter__footer--form">
                    <div class="newsletter__footer--fields">
                        <div class="control">
                            <label for="newsletter">
                                <span class="label">Abonneer u op onze nieuwsbrief</span>
                                <div class="input newsletter__input">
                                    <label class="
            label
            input__label
                label--hidden
            newsletter__label
        " for="newsletterEmail">
                                        Email for newsletter subscription
                                    </label>
                                    <input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
                                </div>

                            </label>
                            <div class="newsletter__footer--agreements">
                                <div class="checkbox newsletter__footer--checkbox">
                                    <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                                    <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                        <use xlink:href="/images/icons-sprite.svg#checked"></use>
                                    </svg>
                                    <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                        <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
                                    </svg>
                                    <label for="newsletter" class="checkbox__label ">
                                        <span class="checkbox__text">
                                            <a href="#" title="Privacy Policy">Privacy Policy</a>
                                        </span>
                                    </label>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="newsletter__footer--button">
                        <button class="button button--secondary newsletter__button">
                            Sign Up
                        </button>

                    </div>
                </form>
            </div>

        </div>

    </div>

    <div class="footer-center">

        <div class="contact-bar__footer container">
            <div class="row">

                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#phone"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Stuur een mail</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via Facebook</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#chat"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via de Chat</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <div class="footer margin-top-xl">
        <div class="footer__handler container">
            <button class="button button--icon footer__scroll-top" type="button" aria-label="scroll to top">
                <svg class="icon " role="presentation" focusable="false">
                    <title>Scroll to top</title>
                    <use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
                </svg>

            </button>

            <section class="footer__links">
                <div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
                                Customers

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign in">
                                                    Login to My Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign up">
                                                    Create an Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Orders">
                                                    My Orders
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Cart">
                                                    My Cart
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Checkout">
                                                    Checkout
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
                                Information

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Hours">
                                                    Hours
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="About Us">
                                                    About Us
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Contact Us">
                                                    Contact Us
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Job Openings">
                                                    Job Openings
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Returns">
                                                    Returns
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Shipping">
                                                    Shipping
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 3
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Privacy Policy">
                                                    Privacy Policy
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Terms & Conditions">
                                                    Terms &amp; Conditions
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Site Map">
                                                    Site Map
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 4
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Reviews">
                                                    Reviews
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Email Us!">
                                                    Email Us!
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('dropdown-footer'));
                </script>

            </section>

            <div class="footer__social-handler ">
                <h3 class="footer__social-list-title">
                    Let&#x27;s get social!
                </h3>

                <ul class="list list--with-icon list--horizontal footer__social-list">
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Facebook logo</title>
                                <use xlink:href="/images/icons-sprite.svg#facebook"></use>
                            </svg>

                        </a>
                    </li>
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Twitter logo</title>
                                <use xlink:href="/images/icons-sprite.svg#twitter"></use>
                            </svg>

                        </a>
                    </li>
                </ul>

            </div>
            <div class="footer__payments">
                <ul class="footer__payments-list list list--horizontal ">
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>AfterPay</title>
                            <use xlink:href="/images/icons-sprite.svg#afterpay"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>iDEAL</title>
                            <use xlink:href="/images/icons-sprite.svg#ideal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
                            <title>PayPal</title>
                            <use xlink:href="/images/icons-sprite.svg#paypal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>American Express</title>
                            <use xlink:href="/images/icons-sprite.svg#american-express"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
                            <title>Visa</title>
                            <use xlink:href="/images/icons-sprite.svg#visa"></use>
                        </svg>

                    </li>
                </ul>
            </div>
        </div>

        <section class="footer__bottom-bar ">
            <div class="footer__bottom-bar-handler container">
                <div class="footer__copyright">
                    <small>
                        Copyright © 2019 Alpaca
                    </small>
                </div>

                <div class="footer__switchers">
                    <div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
                                    German

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('language-dropdown'));
                    </script>

                    <div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
                                    USD - US Dollar

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('currency-dropdown'));
                    </script>

                </div>
            </div>
        </section>

        <div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
            <div class="cookie-message__container">
                <p class="cookie-message__text">
                    <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
                </p>

                <button class="
                button
                button--icon
                cookie-message__close
                cookie-message__button
                button--rotate-icon
            " type="button" aria-label="Close cookie message">
                    <svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
                        <title>Close</title>
                        <use xlink:href="/images/icons-sprite.svg#close"></use>
                    </svg>

                </button>
            </div>
        </div>
        <script src="/components/raw/cookie-message/cookie-message.js"></script>

    </div>
</footer>

<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
    {{ render '@header' }}
    {{ render '@hero--primary' }}

    <main id="maincontent" class="container">
        {{ render '@breadcrumbs' breadcrumbs }}
        {{ render '@heading' mainHeading merge=true }}
        <div class="row contact-us">
            <div class="col-xs-12 col-lg-6">
                <p class="contact-us__description">
                    {{ form.description }}
                </p>
                <form class="conact-us__form">
                    <fieldset class="fieldset">
                        <legend class="contact-us__legend">
                            {{ form.legend }}
                        </legend>
                        {{ render '@select' form.select merge=true }}
                        {{ render '@input' form.input1 merge=true }}
                        {{ render '@input' form.input2 merge=true }}
                        {{ render '@input' form.input3 merge=true }}
                        {{ render '@input' form.input4 merge=true }}
                        {{ render '@input--textarea' form.input5 merge=true }}
                    </fieldset>
                    {{ render '@button' form.button }}
                    <p class="contact-us__tips">
                        {{ form.validationTips }}
                    </p>
                </form>
            </div>
            <div
                class="
                    col-xs-12
                    col-lg-6
                    contact-us__details
                "
            >
                <div class="contact-us__phone">
                    {{ render '@heading' phone.heading }}
                    <span class="contact-us__phone-number">
                        {{ phone.number }}
                    </span>
                </div>
                <div class="contact-us__address">
                    {{ render '@heading' address.heading }}
                    <p class="contact-us__address-item">
                        {{ address.name }}
                    </p>
                    <p class="contact-us__address-item">
                        {{ address.details }}
                    </p>
                </div>
                {{ render '@heading' openingHours.heading }}
                <ul class="contact-us__list">
                    {{#each openingHours.items }}
                        <li class="contact-us__list-item">
                            <span class="contact-us__day {{ dayClass }}">
                                {{ day }}
                            </span>
                            <span class="contact-us__hour {{ hourClass }}">
                                {{ hour }}
                            </span>
                        </li>
                    {{/each}}
                </ul>
            </div>
        </div>
    </main>
</div>

{{ render '@footer' }}
{
  "breadcrumbs": {
    "categories": [
      {
        "name": "Home",
        "href": "#",
        "linkClass": "breadcrumbs__link"
      },
      {
        "name": "Contact Us",
        "href": "#",
        "linkClass": "breadcrumbs__link"
      }
    ]
  },
  "mainHeading": {
    "text": "Send us an email",
    "class": "margin-top-sm text-center"
  },
  "form": {
    "legend": "General",
    "description": "Please fill out the form below. We're here to answer all of your questions and recommend the best products that will help you achieve your specific goals! We look forward to working with you!",
    "select": {
      "label": {
        "text": "Choose from options below",
        "class": "label--hidden"
      },
      "field": {
        "id": "select-1",
        "name": "select-1"
      },
      "options": [
        {
          "text": "Choose from options below"
        }
      ]
    },
    "input1": {
      "label": {
        "text": "First name"
      },
      "field": {
        "id": "input-1",
        "name": "input-1",
        "attributes": "required",
        "placeholder": ""
      }
    },
    "input2": {
      "label": {
        "text": "Last name"
      },
      "field": {
        "id": "input-2",
        "name": "input-2",
        "attributes": "required",
        "placeholder": ""
      }
    },
    "input3": {
      "label": {
        "text": "Email"
      },
      "field": {
        "id": "input-3",
        "name": "input-3",
        "attributes": "required autocomplete=\"email\"",
        "placeholder": ""
      }
    },
    "input4": {
      "label": {
        "text": "Phone"
      },
      "field": {
        "id": "input-4",
        "name": "input-4",
        "attributes": "autocomplete=\"tel\"",
        "placeholder": ""
      }
    },
    "input5": {
      "label": {
        "text": "Comment / Questions"
      },
      "field": {
        "id": "input-5",
        "name": "input-5",
        "placeholder": ""
      }
    },
    "button": {
      "class": "contact-us__button",
      "tag": "button",
      "attributes": "type=\"submit\"",
      "text": "Submit message"
    },
    "validationTips": "Fields marked * are mandatory"
  },
  "phone": {
    "heading": {
      "class": "contact-us__heading",
      "tag": "h2",
      "text": "Call us"
    },
    "number": "800 - 123 - 4567"
  },
  "address": {
    "heading": {
      "class": "contact-us__heading",
      "tag": "h2",
      "text": "Warehouse & office address"
    },
    "name": "Alpaca",
    "details": "442 Route 206 Montague NJ, 07827"
  },
  "openingHours": {
    "heading": {
      "class": "contact-us__heading",
      "tag": "h2",
      "text": "Store hours"
    },
    "items": [
      {
        "day": "Monday",
        "hour": "10 A.M EST - 7 P.M. EST"
      },
      {
        "day": "Tuesday",
        "hour": "10 A.M EST - 7 P.M. EST"
      },
      {
        "day": "Wednesday",
        "hour": "10 A.M EST - 7 P.M. EST"
      },
      {
        "day": "Thursday",
        "hour": "10 A.M EST - 7 P.M. EST"
      },
      {
        "day": "Friday",
        "hour": "10 A.M EST - 7 P.M. EST"
      },
      {
        "day": "Saturday",
        "hour": "10 A.M EST - 5 P.M. EST"
      },
      {
        "day": "Sunday",
        "hour": "Closed",
        "dayClass": "contact-us__day--special",
        "hourClass": "contact-us__hour--special"
      }
    ]
  }
}
  • Content:
    $contact-us__max-width               : 500px !default;
    $contact-us__margin                  : 0 auto !default;
    
    $contact-us__heading-margin          : 0 0 $spacer--medium !default;
    $contact-us__heading-font-family     : $font-family-base !default;
    $contact-us__heading-font-size       : $font-size-large !default;
    $contact-us__heading-font-weight     : $font-weight-bold !default;
    
    $contact-us__description-margin      : 0 0 $spacer--semi-medium !default;
    $contact-us__description-color       : $color-secondary !default;
    
    $contact-us__button-margin           : $spacer--medium 0 0 !default;
    
    $contact-us__tips-color              : $color-secondary !default;
    
    $contact-us__details-padding\@large  : 0 0 0 72px !default;
    $contact-us__details-padding\@xl     : 0 0 0 72px !default;
    
    $contact-us__list-max-width\@large   : 320px !default;
    
    $contact-us__day--special-color      : $color-error !default;
    
    $contact-us__hour-color              : $color-secondary !default;
    $contact-us__hour--special-color     : $color-error !default;
    
    $contact-us__phone-number-font-size  : $font-size-large !default;
    $contact-us__phone-number-font-weight: $font-weight-medium !default;
    
    $contact-us__address-item-color      : $color-secondary !default;
    
    $contact-us__fieldset-padding        : 0 !default;
    
  • URL: /components/raw/contact-us/_contact-us-variables.scss
  • Filesystem Path: build/components/Templates/contact-us/_contact-us-variables.scss
  • Size: 1.3 KB
  • Content:
    @import 'contact-us-variables';
    
    .contact-us {
        max-width: $contact-us__max-width;
        margin: $contact-us__margin;
        flex-direction: column;
    
        @include mq($screen-l) {
            max-width: 100%;
        }
    
        &__heading {
            margin: $contact-us__heading-margin;
            font-family: $contact-us__heading-font-family;
            font-size: $contact-us__heading-font-size;
            font-weight: $contact-us__heading-font-weight;
        }
    
        &__legend {
            @include visually-hidden();
        }
    
        &__description,
        &__description > p {
            margin: $contact-us__description-margin;
            color: $contact-us__description-color;
        }
    
        &__button {
            margin: $contact-us__button-margin;
        }
    
        &__tips {
            margin-top: $spacer--semi-medium;
            color: $contact-us__tips-color;
        }
    
        &__details {
            margin-top: $spacer--extra-large;
    
            @include mq($screen-l) {
                padding: $contact-us__details-padding\@large;
                margin-top: 0;
            }
    
            @include mq($screen-xl) {
                padding: $contact-us__details-padding\@xl;
            }
        }
    
        &__list {
            padding: 0;
    
            @include mq($screen-l) {
                max-width: $contact-us__list-max-width\@large;
            }
        }
    
        &__list-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: $spacer--medium;
            position: relative;
        }
    
        &__day {
            font-weight: $font-weight-bold;
            &:before {
                background: #000000;
                color: #ffffff;
                margin-left: -15px;
                width: 3px;
                height: 100%;
                position: absolute;
            }
            @include mq($screen-m) {
                font-size: $font-size-large;
            }
    
            &--special {
                color: $contact-us__day--special-color;
            }
        }
    
        &__hour {
            color: $color-secondary;
    
            @include mq($screen-m) {
                font-size: $font-size-medium;
            }
    
            &--special {
                color: $contact-us__hour--special-color;
                font-weight: $font-weight-bold;
            }
        }
    
        &__phone,
        &__address {
            margin-bottom: $spacer--extra-large;
        }
        &__mail-address,
        &__phone-number {
            display: flex;
            font-size: $contact-us__phone-number-font-size;
            font-weight: $contact-us__phone-number-font-weight;
        }
    
        &__address-item {
            margin-bottom: 0;
            color: $contact-us__address-item-color;
        }
    
        // Override webforms styles
        .webforms {
            .fieldset {
                padding: $contact-us__fieldset-padding;
            }
        }
    }
    
  • URL: /components/raw/contact-us/_contact-us.scss
  • Filesystem Path: build/components/Templates/contact-us/_contact-us.scss
  • Size: 2.6 KB

There are no notes for this item.