Copy environment

Case Study Hero

<section class="section section--page-intro case-study-hero">
    <div class="section__inner">
        <div class="section__content">
            <div class="case-study-hero__bg"></div>
            <div class="case-study-hero__inner">
                <div class="h-container">

                    <h1 class="heading heading--primary h2 case-study-hero__title">
                        <span class="heading__main">
                    Tavex e-commerce platform
            </span>
                    </h1>
                    <div class="grid case-study-hero__grid">
                        <div class="grid__col grid__col--sm-4 grid__col--lg-3 case-study-hero__content-col">
                            <div class="case-study-hero__content text editor">
                                <h3>services</h3>
                                <p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br>
                                <h3>team</h3>
                                <ul>
                                    <li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li>
                                    <li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li>
                                    <li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li>
                                    <li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li>
                                </ul><br><a href='#'>Read more</a>
                            </div>
                            <div class="case-study-hero__col-bg"></div>
                        </div>
                        <div class="grid__col grid__col--sm-8 grid__col--lg-9">
                            <div class="case-study-hero__browser-bar">
                                <div class="case-study-hero__browser-actions"></div>
                            </div>
                            <div class="case-study-hero__image-wrapper">
                                <div class="image image--fluid case-study-hero__image case-study-hero__image--cutout">
                                    <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%20850%201600%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/850x1600" srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "hasCutout": true,
    "heading": {
      "prefix": null,
      "text": "Tavex e-commerce platform"
    },
    "content": "<h3>services</h3><p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br><h3>team</h3><ul><li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li><li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li><li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li><li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li></ul><br><a href='#'>Read more</a>"
  }
}

Second

<section class="section section--page-intro case-study-hero">
    <div class="section__inner">
        <div class="section__content">
            <div class="case-study-hero__bg" style="background-color: #00bf9c;"></div>
            <div class="case-study-hero__inner">
                <div class="h-container">

                    <h1 class="heading heading--secondary h2 case-study-hero__title">
                        <span class="heading__main">
                    Tavex e-commerce platform
            </span>
                    </h1>
                    <div class="grid case-study-hero__grid">
                        <div class="grid__col grid__col--sm-4 grid__col--lg-3 case-study-hero__content-col">
                            <div class="case-study-hero__content text editor">
                                <h3>services</h3>
                                <p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br>
                                <h3>team</h3>
                                <ul>
                                    <li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li>
                                    <li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li>
                                    <li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li>
                                    <li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li>
                                </ul><br><a href='#'>Read more</a>
                            </div>
                            <div class="case-study-hero__col-bg" style="background-color: #00bf9c;"></div>
                        </div>
                        <div class="grid__col grid__col--sm-8 grid__col--lg-9">
                            <div class="case-study-hero__browser-bar">
                                <div class="case-study-hero__browser-actions"></div>
                            </div>
                            <div class="case-study-hero__image-wrapper">
                                <div class="image image--fluid case-study-hero__image case-study-hero__image--cutout">
                                    <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%20850%201600%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/850x1600" srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "hasCutout": true,
    "heading": {
      "prefix": null,
      "text": "Tavex e-commerce platform"
    },
    "content": "<h3>services</h3><p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br><h3>team</h3><ul><li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li><li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li><li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li><li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li></ul><br><a href='#'>Read more</a>",
    "color": "#00bf9c",
    "headingColor": "secondary"
  }
}

Third

<section class="section section--page-intro case-study-hero">
    <div class="section__inner">
        <div class="section__content">
            <div class="case-study-hero__bg" style="background-color: #ffc400;"></div>
            <div class="case-study-hero__inner">
                <div class="h-container">

                    <h1 class="heading heading--tertiary h2 case-study-hero__title">
                        <span class="heading__main">
                    Tavex e-commerce platform
            </span>
                    </h1>
                    <div class="grid case-study-hero__grid">
                        <div class="grid__col grid__col--sm-4 grid__col--lg-3 case-study-hero__content-col">
                            <div class="case-study-hero__content text editor">
                                <h3>services</h3>
                                <p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br>
                                <h3>team</h3>
                                <ul>
                                    <li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li>
                                    <li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li>
                                    <li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li>
                                    <li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li>
                                </ul><br><a href='#'>Read more</a>
                            </div>
                            <div class="case-study-hero__col-bg" style="background-color: #ffc400;"></div>
                        </div>
                        <div class="grid__col grid__col--sm-8 grid__col--lg-9">
                            <div class="case-study-hero__browser-bar">
                                <div class="case-study-hero__browser-actions"></div>
                            </div>
                            <div class="case-study-hero__image-wrapper">
                                <div class="image image--fluid case-study-hero__image case-study-hero__image--cutout">
                                    <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%20850%201600%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/850x1600" srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "hasCutout": true,
    "heading": {
      "prefix": null,
      "text": "Tavex e-commerce platform"
    },
    "content": "<h3>services</h3><p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br><h3>team</h3><ul><li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li><li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li><li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li><li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li></ul><br><a href='#'>Read more</a>",
    "color": "#ffc400",
    "headingColor": "tertiary"
  }
}

Fourth

<section class="section section--page-intro case-study-hero">
    <div class="section__inner">
        <div class="section__content">
            <div class="case-study-hero__bg" style="background-color: #ff452d;"></div>
            <div class="case-study-hero__inner">
                <div class="h-container">

                    <h1 class="heading heading--primary h2 case-study-hero__title">
                        <span class="heading__main">
                    Tavex e-commerce platform
            </span>
                    </h1>
                    <div class="grid case-study-hero__grid">
                        <div class="grid__col grid__col--sm-4 grid__col--lg-3 case-study-hero__content-col">
                            <div class="case-study-hero__content text editor">
                                <h3>services</h3>
                                <p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br>
                                <h3>team</h3>
                                <ul>
                                    <li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li>
                                    <li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li>
                                    <li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li>
                                    <li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li>
                                </ul><br><a href='#'>Read more</a>
                            </div>
                            <div class="case-study-hero__col-bg" style="background-color: #ff452d;"></div>
                        </div>
                        <div class="grid__col grid__col--sm-8 grid__col--lg-9">
                            <div class="case-study-hero__browser-bar">
                                <div class="case-study-hero__browser-actions"></div>
                            </div>
                            <div class="case-study-hero__image-wrapper">
                                <div class="image image--fluid case-study-hero__image case-study-hero__image--cutout">
                                    <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%20850%201600%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/850x1600" srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "hasCutout": true,
    "heading": {
      "prefix": null,
      "text": "Tavex e-commerce platform"
    },
    "content": "<h3>services</h3><p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br><h3>team</h3><ul><li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li><li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li><li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li><li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li></ul><br><a href='#'>Read more</a>",
    "color": "#ff452d",
    "headingColor": "primary"
  }
}

Fifth

<section class="section section--page-intro case-study-hero">
    <div class="section__inner">
        <div class="section__content">
            <div class="case-study-hero__bg" style="background-color: #e8fefb;"></div>
            <div class="case-study-hero__inner">
                <div class="h-container">

                    <h1 class="heading heading--primary h2 case-study-hero__title">
                        <span class="heading__main">
                    Tavex e-commerce platform
            </span>
                    </h1>
                    <div class="grid case-study-hero__grid">
                        <div class="grid__col grid__col--sm-4 grid__col--lg-3 case-study-hero__content-col">
                            <div class="case-study-hero__content text editor">
                                <h3>services</h3>
                                <p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br>
                                <h3>team</h3>
                                <ul>
                                    <li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li>
                                    <li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li>
                                    <li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li>
                                    <li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li>
                                </ul><br><a href='#'>Read more</a>
                            </div>
                            <div class="case-study-hero__col-bg" style="background-color: #e8fefb;"></div>
                        </div>
                        <div class="grid__col grid__col--sm-8 grid__col--lg-9">
                            <div class="case-study-hero__browser-bar">
                                <div class="case-study-hero__browser-actions"></div>
                            </div>
                            <div class="case-study-hero__image-wrapper">
                                <div class="image image--fluid case-study-hero__image case-study-hero__image--cutout">
                                    <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%20850%201600%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/850x1600" srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "hasCutout": true,
    "heading": {
      "prefix": null,
      "text": "Tavex e-commerce platform"
    },
    "content": "<h3>services</h3><p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br><h3>team</h3><ul><li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li><li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li><li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li><li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li></ul><br><a href='#'>Read more</a>",
    "color": "#e8fefb"
  }
}

No Cutout

<section class="section section--page-intro case-study-hero">
    <div class="section__inner">
        <div class="section__content">
            <div class="case-study-hero__bg" style="background-color: #e8fefb;"></div>
            <div class="case-study-hero__inner">
                <div class="h-container">

                    <h1 class="heading heading--primary h2 case-study-hero__title">
                        <span class="heading__main">
                    Tavex e-commerce platform
            </span>
                    </h1>
                    <div class="grid case-study-hero__grid">
                        <div class="grid__col grid__col--sm-4 grid__col--lg-3 case-study-hero__content-col">
                            <div class="case-study-hero__content text editor">
                                <h3>services</h3>
                                <p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br>
                                <h3>team</h3>
                                <ul>
                                    <li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li>
                                    <li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li>
                                    <li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li>
                                    <li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li>
                                </ul><br><a href='#'>Read more</a>
                            </div>
                            <div class="case-study-hero__col-bg" style="background-color: #e8fefb;"></div>
                        </div>
                        <div class="grid__col grid__col--sm-8 grid__col--lg-9">
                            <div class="case-study-hero__browser-bar">
                                <div class="case-study-hero__browser-actions"></div>
                            </div>
                            <div class="case-study-hero__image-wrapper">
                                <div class="image image--fluid case-study-hero__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%20850%201600%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" data-sizes="auto" alt="" class="image__img lazyload">
                                        <noscript>
                <img src="//placehold.it/850x1600" srcset="//placehold.it/850x1600 850w, //placehold.it/1700x3200 1700w" sizes="100vw" alt="" class="image__img">
            </noscript>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
{
  "language": "en-US",
  "data": {
    "hasCutout": null,
    "heading": {
      "prefix": null,
      "text": "Tavex e-commerce platform"
    },
    "content": "<h3>services</h3><p>PHP, Wordpress, WebGL, JQuery, Angular, Aurelia, Typescript</p><br><h3>team</h3><ul><li>Ardo Aednik <span style='opacity: 0.35;'>front-end</span></li><li>Pärt Erikson <span style='opacity: 0.35;'>back-end</span></li><li>Lauri Post <span style='opacity: 0.35;'> prject lead (Bitfiner)</span></li><li>Oliver Oberg <span style='opacity: 0.35;'>design</span></li></ul><br><a href='#'>Read more</a>",
    "color": "#e8fefb"
  }
}