Copy environment

Art Gallery

Alternative

<div class="art-gallery  art-gallery--alternative">
    <div class="h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-12 grid__col--left-gutter-xs-4 grid__col--bottom-gutter-xs-1">
                <h3>Kõneisikute fotod</h3>
            </div>
        </div>
        <div class="grid art-gallery__grid">
            <div class="grid__col grid__col--xs-11 grid__col--sm-12 grid__col--right-gutter-xs-2 grid__col--right-gutter-sm-0 grid__col--left-gutter-xs-1 grid__col--left-gutter-sm-2 grid__col--top-gutter-xs-3 grid__col--bottom-gutter-xs-2">
                <div class="art-gallery__slide-list js-art-carousel">
                    <div class="art-gallery__slide" data-author="Ahti Asman" data-title="Juhatuse esimees">
                        <h3 class="art-gallery__title">Ahti Asman
                            <span class="art-gallery__subtitle">Juhatuse esimees</span>
                        </h3>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                    </div>
                    <div class="art-gallery__slide" data-author="Andres Klaasimägi" data-title="VKG Soojus juhatuse liige">
                        <h3 class="art-gallery__title">Andres Klaasimägi
                            <span class="art-gallery__subtitle">VKG Soojus juhatuse liige</span>
                        </h3>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                    </div>
                    <div class="art-gallery__slide" data-author="Irina Bojenko" data-title="Kommunikatsioonijuht">
                        <h3 class="art-gallery__title">Irina Bojenko
                            <span class="art-gallery__subtitle">Kommunikatsioonijuht</span>
                        </h3>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                    </div>
                    <div class="art-gallery__slide" data-author="Jaanis Sepp" data-title="Juhatuse liige ja finantsdirektor">
                        <h3 class="art-gallery__title">Jaanis Sepp
                            <span class="art-gallery__subtitle">Juhatuse liige ja finantsdirektor</span>
                        </h3>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                    </div>
                    <div class="art-gallery__slide" data-author="Marek Tull" data-title="Ametinimetus">
                        <h3 class="art-gallery__title">Marek Tull
                            <span class="art-gallery__subtitle">Ametinimetus</span>
                        </h3>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                    </div>
                    <div class="art-gallery__slide" data-author="Markus Kottise" data-title="Ametinimetus">
                        <h3 class="art-gallery__title">Markus Kottise
                            <span class="art-gallery__subtitle">Ametinimetus</span>
                        </h3>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                        <div class="masterpiece art-gallery__masterpiece masterpiece--person">
                            <div class="masterpiece__inner">

                                <div class="image image--block masterpiece__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <a href="#" class="button masterpiece__download button--icon-w-link button--small art-gallery__masterpiece">
                                <div class="button__text-container">
                                    <span class="button__text">Lae alla</span>
                                </div>
                                <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#download"></use>
</svg>
            </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid__col grid__col--xs-10 grid__col--sm-6 grid__col--left-gutter-sm-4 art-gallery__dots art-gallery--dots-w-title">
            </div>
        </div>
    </div>
</div>
{
  "language": "en-US",
  "data": {
    "component": "art-gallery",
    "slides": [
      {
        "fname": "Ahti",
        "lname": "Asman",
        "subtitle": "Juhatuse esimees",
        "items": [
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          },
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          }
        ]
      },
      {
        "fname": "Andres",
        "lname": "Klaasimägi",
        "subtitle": "VKG Soojus juhatuse liige",
        "items": [
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          },
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          }
        ]
      },
      {
        "fname": "Irina",
        "lname": "Bojenko",
        "subtitle": "Kommunikatsioonijuht",
        "items": [
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          },
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          }
        ]
      },
      {
        "fname": "Jaanis",
        "lname": "Sepp",
        "subtitle": "Juhatuse liige ja finantsdirektor",
        "items": [
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          },
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          }
        ]
      },
      {
        "fname": "Marek",
        "lname": "Tull",
        "subtitle": "Ametinimetus",
        "items": [
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          },
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          }
        ]
      },
      {
        "fname": "Markus",
        "lname": "Kottise",
        "subtitle": "Ametinimetus",
        "items": [
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          },
          {
            "image": true,
            "orientation": "landscape",
            "content": null,
            "download": {
              "text": "Lae alla"
            }
          }
        ]
      }
    ],
    "title": "Kõneisikute fotod",
    "bottomGutter": 2,
    "modifier": "art-gallery--alternative",
    "hasSubtitle": "true"
  }
}