Copy environment

Box

Preview 
<div class="box    box--wide ">
    <div class="h-container">
        <div class="grid grid--center-xs">
            <div class="grid__col grid__col--xs-20 grid__col--sm-11">
                <div class="box__box color-light-orange">
                    <div class="box__content text text--double">
                        <p class='h3'>Ehitame oma tegevust vastutustundlikul moel, arvestades meie töötajate, kohaliku kogukonna, klientide ja huvigruppide vajaduste ja huvidega.</p>
                        <a href="#" class="button button--read box__button">
                    <span class="button__text">Vaata lähemalt</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </a>
                    </div>
                </div>
            </div>
            <div class="grid__col grid__col--xs-20 grid__col--sm-9">

                <div class="image image--fluid box__image">
                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20450%20550%22%3E%3C%2Fsvg%3E" data-parent-fit="cover" data-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto"
                        alt="" class="image__img lazyload">
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "box",
    "content": "<p class='h3'>Ehitame oma tegevust vastutustundlikul moel, arvestades meie töötajate, kohaliku kogukonna, klientide ja huvigruppide vajaduste ja huvidega.</p>",
    "button": {
      "text": "Vaata lähemalt",
      "url": "#"
    },
    "wide": true
  }
}

Report Danger

Preview 
<div class="box   ">
    <div class="h-container">
        <div class="grid grid--center-xs">
            <div class="grid__col grid__col--xs-20 grid__col--sm-11">
                <div class="box__box color-light-yellow">
                    <div class="box__content text text--double">
                        <h3>Teadlikkuse tõstmine</h3>
                        <p>Tervislike ja ohutute töötingimuste tagamiseks ning tööõnnetuste ärahoidmiseks peavad töötajad teadma ohutu töö võtteid, mille tagavad nõuetekohane juhendamine ja väljaõpe.</p>
                        <p>Kõik meie töötajad läbivad professionaalse ja kvaliteetse väljaõppe ning juhendamise kogenud spetsialistide juhendamisel. Enne iseseisvale tööle lubamist peab iga töötaja läbima eksami. Lisaks esialgsetele juhendamistele viiakse
                            jooksvalt läbi erinevaid koolitusi ning tööohutuse teadmiste kontrolle. </p>
                    </div>
                </div>
            </div>
            <div class="grid__col grid__col--xs-20 grid__col--sm-9">

                <div class="image image--fluid box__image">
                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20450%20550%22%3E%3C%2Fsvg%3E" data-parent-fit="cover" data-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto"
                        alt="" class="image__img lazyload">
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "box",
    "content": "<h3>Teadlikkuse tõstmine</h3><p>Tervislike ja ohutute töötingimuste tagamiseks ning tööõnnetuste ärahoidmiseks peavad töötajad teadma ohutu töö võtteid, mille tagavad nõuetekohane juhendamine ja väljaõpe.</p><p>Kõik meie töötajad läbivad professionaalse ja kvaliteetse väljaõppe ning juhendamise kogenud spetsialistide juhendamisel. Enne iseseisvale tööle lubamist peab iga töötaja läbima eksami. Lisaks esialgsetele juhendamistele viiakse jooksvalt läbi erinevaid koolitusi ning tööohutuse teadmiste kontrolle. </p>",
    "button": null,
    "wide": null,
    "color": "color-light-yellow",
    "bottomGutter": 2,
    "topGutter": 2,
    "background": "grey"
  }
}

Environment

Preview 
<div class="box   ">
    <div class="h-container">
        <div class="grid grid--center-xs">
            <div class="grid__col grid__col--xs-20 grid__col--sm-11">
                <div class="box__box color-light-green-1">
                    <div class="box__content text text--double">
                        <h4>Meie põhiülesandeks keskkonnakaitse valdkonnas on kontserni tootmisoperatsioonide keskkonnamõju efektiivne juhtimine, tagamaks keskkonna säilimise praeguste ja tulevaste põlvkondade hüvanguks.</h4>
                        <p>Rohkem infot teostatud projektidest ning lähiaastate fookusest saad lugeda meie <a href='#'>Säästva arengu ja sotsiaalse vastutuse aruandest.</a></p>
                    </div>
                </div>
            </div>
            <div class="grid__col grid__col--xs-20 grid__col--sm-9">

                <div class="image image--fluid box__image">
                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20450%20550%22%3E%3C%2Fsvg%3E" data-parent-fit="cover" data-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto"
                        alt="" class="image__img lazyload">
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "box",
    "content": "<h4>Meie põhiülesandeks keskkonnakaitse valdkonnas on kontserni tootmisoperatsioonide keskkonnamõju efektiivne juhtimine, tagamaks keskkonna säilimise praeguste ja tulevaste põlvkondade hüvanguks.</h4><p>Rohkem infot teostatud projektidest ning lähiaastate fookusest saad lugeda meie <a href='#'>Säästva arengu ja sotsiaalse vastutuse aruandest.</a></p>",
    "button": null,
    "wide": null,
    "color": "color-light-green-1",
    "bottomGutter": 2
  }
}

Career

Preview 
<div class="box   ">
    <div class="h-container">
        <div class="grid grid--center-xs">
            <div class="grid__col grid__col--xs-20 grid__col--sm-11">
                <div class="box__box color-light-yellow">
                    <div class="box__content text text--double">
                        <h3>Ideed ellu</h3>
                        <p>Tunneme kirge uute võimaluste ja tehnoloogiate vastu. Just soov jõuda kaugemale ning teha paremini on aidanud meil areneda ning edu saavutada. Teame, et uued tehnoloogilised lahendused loovad väärtust kõikidele. Kui Sul on innovatiivne
                            mõte või särav idee, kuidas teha meie valdkonnas asju paremini või teistmoodi – jaga oma ideed meiega ning aitame Sul seda teostada. Saada oma idee kirjeldus aadressile <a href='#'>idee@vkg.ee</a> ning võida võimalus sellesse
                            elu sisse puhuda. </p>
                    </div>
                </div>
            </div>
            <div class="grid__col grid__col--xs-20 grid__col--sm-9">

                <div class="image image--fluid box__image">
                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20450%20550%22%3E%3C%2Fsvg%3E" data-parent-fit="cover" data-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto"
                        alt="" class="image__img lazyload">
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "box",
    "content": "<h3>Ideed ellu</h3><p>Tunneme kirge uute võimaluste ja tehnoloogiate vastu. Just soov jõuda kaugemale ning teha paremini on aidanud meil areneda ning edu saavutada. Teame, et uued tehnoloogilised lahendused loovad väärtust kõikidele. Kui Sul on innovatiivne mõte või särav idee, kuidas teha meie valdkonnas asju paremini või teistmoodi – jaga oma ideed meiega ning aitame Sul seda teostada. Saada oma idee kirjeldus aadressile <a href='#'>idee@vkg.ee</a> ning võida võimalus sellesse elu sisse puhuda. </p>",
    "button": null,
    "wide": null,
    "color": "color-light-yellow"
  }
}