Copy environment

Hero

<div class="hero  ">
    <div class="h-container">
        <div class="hero__inner">

            <h1 class="heading  h2">
                <span class="heading__small">a call for</span>
                <span class="heading__main">
                    default developer
            </span>
            </h1>
            <div class="hero__content">
                <div class="hero__content-details text">
                    <h4 class="h-hidden-xs h-hidden-sm text-lowercase">details</h4>
                    <p>Location: Tartu, Estonia</p>
                    <p>Hours: full time, flexible</p>
                    <p>Min. Experience: Junior dev</p>
                </div>
                <a class="hero__content-button js-scroll-to" href="#scroll-down">read more</a>
                <div class="image image--fluid hero__content-image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20175%20325%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" data-sizes="auto" alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/175x325" srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="image image--fluid hero__pattern">
        <div class="image__inner">
            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/img/hero-pattern.svg 192w" data-sizes="auto" alt="" class="image__img lazyload">
            <noscript>
                <img src="../../inc/img/hero-pattern.svg" srcset="../../inc/img/hero-pattern.svg 192w" sizes="100vw" alt="" class="image__img">
            </noscript>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "heading": {
      "prefix": "a call for",
      "text": "default developer"
    },
    "details": {
      "title": "details",
      "content": "<p>Location: Tartu, Estonia</p><p>Hours: full time, flexible</p><p>Min. Experience: Junior dev</p>"
    },
    "button": {
      "text": "read more",
      "link": "#scroll-down"
    }
  }
}

Secondary

<div class="hero  ">
    <div class="h-container">
        <div class="hero__inner">

            <h1 class="heading heading--secondary h2">
                <span class="heading__small">a call for</span>
                <span class="heading__main">
                    back end developer
            </span>
            </h1>
            <div class="hero__content">
                <div class="hero__content-details text">
                    <h4 class="h-hidden-xs h-hidden-sm text-lowercase">details</h4>
                    <p>Location: Tartu, Estonia</p>
                    <p>Hours: full time, flexible</p>
                    <p>Min. Experience: Junior dev</p>
                </div>
                <a class="hero__content-button js-scroll-to" href="#scroll-down">read more</a>
                <div class="image image--fluid hero__content-image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20175%20325%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" data-sizes="auto" alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/175x325" srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="image image--fluid hero__pattern">
        <div class="image__inner">
            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/img/hero-pattern.svg 192w" data-sizes="auto" alt="" class="image__img lazyload">
            <noscript>
                <img src="../../inc/img/hero-pattern.svg" srcset="../../inc/img/hero-pattern.svg 192w" sizes="100vw" alt="" class="image__img">
            </noscript>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "heading": {
      "prefix": "a call for",
      "text": "back end developer"
    },
    "details": {
      "title": "details",
      "content": "<p>Location: Tartu, Estonia</p><p>Hours: full time, flexible</p><p>Min. Experience: Junior dev</p>"
    },
    "button": {
      "text": "read more",
      "link": "#scroll-down"
    },
    "color": "secondary"
  }
}

Tertiary

<div class="hero  ">
    <div class="h-container">
        <div class="hero__inner">

            <h1 class="heading heading--tertiary h2">
                <span class="heading__small">a call for</span>
                <span class="heading__main">
                    default developer
            </span>
            </h1>
            <div class="hero__content">
                <div class="hero__content-details text">
                    <h4 class="h-hidden-xs h-hidden-sm text-lowercase">details</h4>
                    <p>Location: Tartu, Estonia</p>
                    <p>Hours: full time, flexible</p>
                    <p>Min. Experience: Junior dev</p>
                </div>
                <a class="hero__content-button js-scroll-to" href="#scroll-down">read more</a>
                <div class="image image--fluid hero__content-image">
                    <div class="image__inner">
                        <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20175%20325%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" data-sizes="auto" alt="" class="image__img lazyload">
                        <noscript>
                <img src="//placehold.it/175x325" srcset="//placehold.it/175x325 175w, //placehold.it/350x650 350w" sizes="100vw" alt="" class="image__img">
            </noscript>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="image image--fluid hero__pattern">
        <div class="image__inner">
            <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="../../inc/img/hero-pattern.svg 192w" data-sizes="auto" alt="" class="image__img lazyload">
            <noscript>
                <img src="../../inc/img/hero-pattern.svg" srcset="../../inc/img/hero-pattern.svg 192w" sizes="100vw" alt="" class="image__img">
            </noscript>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "heading": {
      "prefix": "a call for",
      "text": "default developer"
    },
    "details": {
      "title": "details",
      "content": "<p>Location: Tartu, Estonia</p><p>Hours: full time, flexible</p><p>Min. Experience: Junior dev</p>"
    },
    "button": {
      "text": "read more",
      "link": "#scroll-down"
    },
    "color": "tertiary"
  }
}