Copy environment

Report

Reversed

<div class="report    report--reversed ">
    <div class="h-container">
        <div class="grid grid--center-xs">
            <div class="grid__col grid__col--xs-20 grid__col--bottom-gutter-xs-2">
                <h3>Säästva arengu aruanne</h3>
            </div>
        </div>
        <div class="    grid
    grid--middle-xs
    grid--center-xs
    grid--start-sm
     grid--reverse-xs grid--end-sm">
            <div class="    grid__col
    grid__col--xs-20
    grid__col--sm-9
    report__image-col
    grid__col--top-gutter-xs-2
    grid__col--top-gutter-sm-0
    ">
                <ul class="report__slide-list js-image-carousel">
                    <li class="report__slide" data-year="2015-2016">

                        <div class="image image--block report__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-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </li>
                    <li class="report__slide" data-year="2014">

                        <div class="image image--block report__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-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </li>
                    <li class="report__slide" data-year="2013">

                        <div class="image image--block report__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-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </li>
                    <li class="report__slide" data-year="2012">

                        <div class="image image--block report__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-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </li>
                    <li class="report__slide" data-year="2011">

                        <div class="image image--block report__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-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </li>
                    <li class="report__slide" data-year="2010">

                        <div class="image image--block report__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-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </li>
                    <li class="report__slide" data-year="2008-2009">

                        <div class="image image--block report__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-srcset="//placehold.it/450x550 450w 550h, //placehold.it/900x1100 900w 1100h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="grid__col grid__col--xs-24 grid__col--sm-5 report__dots">
            </div>
            <div class="    grid__col
    grid__col--xs-20
    grid__col--sm-6
    grid__col--top-gutter-xs-2
    grid__col--top-gutter-sm-0
     grid__col--left-gutter-sm-2">
                <ul class="report__slide-list js-content-carousel" id="6QQ5A3wIgU">
                    <li class="report__slide" data-year="2015-2016">
                        <div class="text text--double">
                            <h3>2015-2016</h3>
                            <p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2015-2016/</a></p>
                        </div>
                    </li>
                    <li class="report__slide" data-year="2014">
                        <div class="text text--double">
                            <h3>2014</h3>
                            <p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2014/</a></p>
                        </div>
                    </li>
                    <li class="report__slide" data-year="2013">
                        <div class="text text--double">
                            <h3>2013</h3>
                            <p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2013/</a></p>
                        </div>
                    </li>
                    <li class="report__slide" data-year="2012">
                        <div class="text text--double">
                            <h3>2012</h3>
                            <p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2012/</a></p>
                        </div>
                    </li>
                    <li class="report__slide" data-year="2011">
                        <div class="text text--double">
                            <h3>2011</h3>
                            <p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2011/</a></p>
                        </div>
                    </li>
                    <li class="report__slide" data-year="2010">
                        <div class="text text--double">
                            <h3>2010</h3>
                            <p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2010/</a></p>
                        </div>
                    </li>
                    <li class="report__slide" data-year="2008-2009">
                        <div class="text text--double">
                            <h3>2008-2009</h3>
                            <p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2008-2009/</a></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "component": "report",
    "title": "Säästva arengu aruanne",
    "slides": [
      {
        "image": true,
        "content": "<h3>2015-2016</h3><p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2015-2016/</a></p>",
        "year": "2015-2016"
      },
      {
        "image": true,
        "content": "<h3>2014</h3><p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2014/</a></p>",
        "year": "2014"
      },
      {
        "image": true,
        "content": "<h3>2013</h3><p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2013/</a></p>",
        "year": "2013"
      },
      {
        "image": true,
        "content": "<h3>2012</h3><p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2012/</a></p>",
        "year": "2012"
      },
      {
        "image": true,
        "content": "<h3>2011</h3><p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2011/</a></p>",
        "year": "2011"
      },
      {
        "image": true,
        "content": "<h3>2010</h3><p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2010/</a></p>",
        "year": "2010"
      },
      {
        "image": true,
        "content": "<h3>2008-2009</h3><p>Vaata säästva arengu aruande veebiversiooni: <a href='#'>www.vkg.ee/SAA2008-2009/</a></p>",
        "year": "2008-2009"
      }
    ],
    "reversed": true
  }
}