Copy environment

Header

<header class="header os-host-flexbox">
    <div class="header__flex">
        <div class="header__top">
            <nav class="languages  header__languages header__languages--sm">
                <ul class="languages__list">
                    <li class="languages__item is-current">
                        <a href="#" class="languages__link">est</a>
                    </li>
                    <li class="languages__item ">
                        <a href="#" class="languages__link">eng</a>
                    </li>
                    <li class="languages__item ">
                        <a href="#" class="languages__link">rus</a>
                    </li>
                </ul>
            </nav>
            <div class="logo  header__logo">
                <img src="../../inc/img/vkg-logo.svg" alt="VKG logo" class="logo__img">
            </div>
            <div class="header__toggle-container">
                <button type="button" class="header__hamburger js-header-toggle"><span></span></button>
            </div>
        </div>
        <div class="header__wrapper">
            <div class="header__inner">
                <nav class="languages  header__languages header__languages--xs">
                    <ul class="languages__list">
                        <li class="languages__item is-current">
                            <a href="#" class="languages__link">est</a>
                        </li>
                        <li class="languages__item ">
                            <a href="#" class="languages__link">eng</a>
                        </li>
                        <li class="languages__item ">
                            <a href="#" class="languages__link">rus</a>
                        </li>
                    </ul>
                </nav>
                <div class="header__menu">
                    <nav class="navigation  header__navigation">
                        <ul class="navigation__list">

                            <li class="navigation__item is-open">
                                <a href="#" class="navigation__link navigation__link--w-children">
                        <span class="navigation__title">
                            Tooted
                        </span>
                    </a>
                                <div class="navigation__child-container">
                                    <ul class="navigation__list navigation__list--children">
                                        <li class="navigation__item is-current">
                                            <a href="#" class="navigation__link">Ülevaade</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Põlevkivikütteõli</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Koks</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Alküülresortsiinid</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Peenkeemiatooted</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Vaigud</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Killustik</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Energia</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link navigation__link--w-children">
                        <span class="navigation__title">
                            Teenused
                        </span>
                    </a>
                                <div class="navigation__child-container">
                                    <ul class="navigation__list navigation__list--children">
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Item 1</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Item 2</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Item 3</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link navigation__link--w-children">
                        <span class="navigation__title">
                            Põlevkivist
                        </span>
                    </a>
                                <div class="navigation__child-container">
                                    <ul class="navigation__list navigation__list--children">
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Item 1</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Item 2</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Item 3</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link ">
                        <span class="navigation__title">
                            Keskkond
                        </span>
                    </a>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link ">
                        <span class="navigation__title">
                            Sotsiaalne vastutus
                        </span>
                    </a>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link navigation__link--w-children">
                        <span class="navigation__title">
                            Tööohutus
                        </span>
                    </a>
                                <div class="navigation__child-container">
                                    <ul class="navigation__list navigation__list--children">
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Ohutu töökeskkond</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Teata ohust</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Kemikaalid</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Partneritele</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link navigation__link--w-children">
                        <span class="navigation__title">
                            Karjäär
                        </span>
                    </a>
                                <div class="navigation__child-container">
                                    <ul class="navigation__list navigation__list--children">
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Karjäär VKG-s</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Tule tööle</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Tule praktikale</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Stipendiumid</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link navigation__link--w-children">
                        <span class="navigation__title">
                            Uudised & meedia
                        </span>
                    </a>
                                <div class="navigation__child-container">
                                    <ul class="navigation__list navigation__list--children">
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Uudised</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Pressile</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Ürituste kalender</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>

                            <li class="navigation__item ">
                                <a href="#" class="navigation__link navigation__link--w-children">
                        <span class="navigation__title">
                            Meist
                        </span>
                    </a>
                                <div class="navigation__child-container">
                                    <ul class="navigation__list navigation__list--children">
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Ettevõttest</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Struktuur ja juhtimine</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Aruanded</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Saavutused ja tunnsutused</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Ajalugu</a>
                                        </li>
                                        <li class="navigation__item ">
                                            <a href="#" class="navigation__link">Kontaktid</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </nav>
                    <div class="header__bottom">
                        <nav class="header__links">
                            <div class="header__link-container">
                                <a href="#" class="button button--icon header__link">
                    <span class="button__text"></span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#facebook"></use>
</svg>
            </span>
            </a>
                            </div>
                            <div class="header__link-container">
                                <a href="#" class="button button--icon header__link">
                    <span class="button__text"></span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#linkedin"></use>
</svg>
            </span>
            </a>
                            </div>
                            <div class="header__link-container">
                                <a href="#" class="button button--icon header__link">
                    <span class="button__text"></span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#instagram"></use>
</svg>
            </span>
            </a>
                            </div>
                            <a href="#" class="button button--simple header__link">
                    <span class="button__text">Siseveeb</span>
                    </a>
                        </nav>
                        <div class="search-form">
                            <form class="search-form__form" action="">

                                <div class="textfield textfield--rounded search-form__field">
                                    <label class="textfield__label " for="text1">
        Textfield label
    </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="text1" name="" value="" placeholder="Otsing">
                                    </div>
                                </div>
                                <button class="search-form__button">
            <svg class="icon  search-form__button-icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#search"></use>
</svg>
        </button>
                            </form>
                        </div>
                        <div class="header__bottom-text">
                            <p>
                                AS Viru Keemia Grupp<br/>
                                <a href="#" class="color-black">Kontaktid</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
{
  "language": "en-US",
  "data": {
    "logo": {
      "logo": "../../inc/img/vkg-logo.svg",
      "title": "VKG logo"
    },
    "navigation": {
      "items": [
        {
          "link": "#",
          "title": "Tooted",
          "children": [
            {
              "link": "#",
              "title": "Ülevaade",
              "current": true
            },
            {
              "link": "#",
              "title": "Põlevkivikütteõli"
            },
            {
              "link": "#",
              "title": "Koks"
            },
            {
              "link": "#",
              "title": "Alküülresortsiinid"
            },
            {
              "link": "#",
              "title": "Peenkeemiatooted"
            },
            {
              "link": "#",
              "title": "Vaigud"
            },
            {
              "link": "#",
              "title": "Killustik"
            },
            {
              "link": "#",
              "title": "Energia"
            }
          ]
        },
        {
          "link": "#",
          "title": "Teenused",
          "children": [
            {
              "link": "#",
              "title": "Item 1"
            },
            {
              "link": "#",
              "title": "Item 2"
            },
            {
              "link": "#",
              "title": "Item 3"
            }
          ]
        },
        {
          "link": "#",
          "title": "Põlevkivist",
          "children": [
            {
              "link": "#",
              "title": "Item 1"
            },
            {
              "link": "#",
              "title": "Item 2"
            },
            {
              "link": "#",
              "title": "Item 3"
            }
          ]
        },
        {
          "link": "#",
          "title": "Keskkond"
        },
        {
          "link": "#",
          "title": "Sotsiaalne vastutus"
        },
        {
          "link": "#",
          "title": "Tööohutus",
          "children": [
            {
              "link": "#",
              "title": "Ohutu töökeskkond"
            },
            {
              "link": "#",
              "title": "Teata ohust"
            },
            {
              "link": "#",
              "title": "Kemikaalid"
            },
            {
              "link": "#",
              "title": "Partneritele"
            }
          ]
        },
        {
          "link": "#",
          "title": "Karjäär",
          "children": [
            {
              "link": "#",
              "title": "Karjäär VKG-s"
            },
            {
              "link": "#",
              "title": "Tule tööle"
            },
            {
              "link": "#",
              "title": "Tule praktikale"
            },
            {
              "link": "#",
              "title": "Stipendiumid"
            }
          ]
        },
        {
          "link": "#",
          "title": "Uudised & meedia",
          "children": [
            {
              "link": "#",
              "title": "Uudised"
            },
            {
              "link": "#",
              "title": "Pressile"
            },
            {
              "link": "#",
              "title": "Ürituste kalender"
            }
          ]
        },
        {
          "link": "#",
          "title": "Meist",
          "children": [
            {
              "link": "#",
              "title": "Ettevõttest"
            },
            {
              "link": "#",
              "title": "Struktuur ja juhtimine"
            },
            {
              "link": "#",
              "title": "Aruanded"
            },
            {
              "link": "#",
              "title": "Saavutused ja tunnsutused"
            },
            {
              "link": "#",
              "title": "Ajalugu"
            },
            {
              "link": "#",
              "title": "Kontaktid"
            }
          ]
        }
      ]
    },
    "languages": {
      "items": [
        {
          "link": "#",
          "title": "est",
          "current": true
        },
        {
          "link": "#",
          "title": "eng"
        },
        {
          "link": "#",
          "title": "rus"
        }
      ]
    },
    "searchForm": {
      "field": {
        "label": "Textfield label",
        "id": "text1",
        "placeholder": "Otsing"
      }
    },
    "bottomText": "AS Viru Keemia Grupp",
    "bottomLink": {
      "text": "Kontaktid",
      "url": "#"
    },
    "social": [
      {
        "icon": "facebook",
        "url": "#"
      },
      {
        "icon": "linkedin",
        "url": "#"
      },
      {
        "icon": "instagram",
        "url": "#"
      }
    ],
    "intraNet": {
      "text": "Siseveeb",
      "url": "#"
    }
  }
}