Copy environment

Gallery List

Preview 
<div class="gallery-list">
    <div class="h-container">
        <div class="grid grid--center-xs">
            <div class="grid__col grid__col--xs-20  grid__col--bottom-gutter-xs-2">
                <a href="#" class="gallery-item">
                    <div class="gallery-item__image-container">

                        <div class="image image--fluid gallery-item__image">
                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20230%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/350x230 350w 230h, //placehold.it/700x460 700w 460h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </div>
                    <div class="gallery-item__info-container">
                        <div class="gallery-item__heading">
                            <h4 class="gallery-item__title">Kaevurite päev 2018
                                <span class="gallery-item__icon-container"><svg class="icon  gallery-item__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
</span>
                            </h4>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Pilte</p>
                            <p class="gallery-item__data-info bold">196</p>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Lisamise aeg</p>
                            <p class="gallery-item__data-info bold">15. november 2018</p>
                        </div>
                        <div class="gallery-item__gallery-container">
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="grid__col grid__col--xs-20  grid__col--bottom-gutter-xs-2">
                <a href="#" class="gallery-item">
                    <div class="gallery-item__image-container">

                        <div class="image image--fluid gallery-item__image">
                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20230%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/350x230 350w 230h, //placehold.it/700x460 700w 460h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </div>
                    <div class="gallery-item__info-container">
                        <div class="gallery-item__heading">
                            <h4 class="gallery-item__title">Kaevurite päev 2018
                                <span class="gallery-item__icon-container"><svg class="icon  gallery-item__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
</span>
                            </h4>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Pilte</p>
                            <p class="gallery-item__data-info bold">196</p>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Lisamise aeg</p>
                            <p class="gallery-item__data-info bold">15. november 2018</p>
                        </div>
                        <div class="gallery-item__gallery-container">
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="grid__col grid__col--xs-20  grid__col--bottom-gutter-xs-2">
                <a href="#" class="gallery-item">
                    <div class="gallery-item__image-container">

                        <div class="image image--fluid gallery-item__image">
                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20230%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/350x230 350w 230h, //placehold.it/700x460 700w 460h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </div>
                    <div class="gallery-item__info-container">
                        <div class="gallery-item__heading">
                            <h4 class="gallery-item__title">Kaevurite päev 2018
                                <span class="gallery-item__icon-container"><svg class="icon  gallery-item__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
</span>
                            </h4>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Pilte</p>
                            <p class="gallery-item__data-info bold">196</p>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Lisamise aeg</p>
                            <p class="gallery-item__data-info bold">15. november 2018</p>
                        </div>
                        <div class="gallery-item__gallery-container">
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="grid__col grid__col--xs-20  grid__col--bottom-gutter-xs-2">
                <a href="#" class="gallery-item">
                    <div class="gallery-item__image-container">

                        <div class="image image--fluid gallery-item__image">
                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20230%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/350x230 350w 230h, //placehold.it/700x460 700w 460h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </div>
                    <div class="gallery-item__info-container">
                        <div class="gallery-item__heading">
                            <h4 class="gallery-item__title">Kaevurite päev 2018
                                <span class="gallery-item__icon-container"><svg class="icon  gallery-item__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
</span>
                            </h4>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Pilte</p>
                            <p class="gallery-item__data-info bold">196</p>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Lisamise aeg</p>
                            <p class="gallery-item__data-info bold">15. november 2018</p>
                        </div>
                        <div class="gallery-item__gallery-container">
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="grid__col grid__col--xs-20  grid__col--bottom-gutter-xs-1">
                <a href="#" class="gallery-item">
                    <div class="gallery-item__image-container">

                        <div class="image image--fluid gallery-item__image">
                            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20350%20230%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/350x230 350w 230h, //placehold.it/700x460 700w 460h" data-sizes="auto" alt="" class="image__img lazyload">
                        </div>
                    </div>
                    <div class="gallery-item__info-container">
                        <div class="gallery-item__heading">
                            <h4 class="gallery-item__title">Kaevurite päev 2018
                                <span class="gallery-item__icon-container"><svg class="icon  gallery-item__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
</span>
                            </h4>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Pilte</p>
                            <p class="gallery-item__data-info bold">196</p>
                        </div>
                        <div class="gallery-item__data">
                            <p class="gallery-item__data-label">Lisamise aeg</p>
                            <p class="gallery-item__data-info bold">15. november 2018</p>
                        </div>
                        <div class="gallery-item__gallery-container">
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="gallery-item__gallery-image-container">

                                <div class="image image--fluid gallery-item__gallery-image">
                                    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="" data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="grid__col grid__col--xs-20">
                <hr class="hr hr--double">

                <div class="pagination gallery__pagination ">
                    <ul class="pagination__list">
                        <li class="pagination__item pagination__arrow--prev pagination__arrow pagination__arrow--disabled">
                            <a href="#" class="pagination__link">
                                <svg class="icon  pagination__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>

                        </a>
                        </li>

                        <li class="pagination__item pagination__item--page">
                            <span class="pagination__link">1</span>
                        </li>

                        <li class="pagination__item ">
                            <a href="#" class="pagination__link">
                            2
                        </a>
                        </li>

                        <li class="pagination__item ">
                            <a href="#" class="pagination__link">
                            3
                        </a>
                        </li>

                        <li class="pagination__item">
                            <span class="pagination__span">...</span>
                        </li>

                        <li class="pagination__item ">
                            <a href="#" class="pagination__link">
                            14
                        </a>
                        </li>

                        <li class="pagination__item pagination__arrow--next pagination__arrow">
                            <a href="#" class="pagination__link">
                                <svg class="icon  pagination__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>

                        </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "gallery-list",
    "pagination": {
      "next": {
        "text": "Next",
        "url": "#",
        "icon": "arrow"
      },
      "previous": {
        "text": "Previous",
        "url": "#",
        "icon": "arrow"
      },
      "current": {
        "text": "1",
        "url": null
      },
      "page": 1,
      "pages": 14,
      "nearbyPagesLimit": 2,
      "extraPagesLimit": 1,
      "items": {
        "1": {
          "text": "1",
          "url": "#"
        },
        "2": {
          "text": "2",
          "url": "#"
        },
        "3": {
          "text": "3",
          "url": "#"
        },
        "4": {
          "text": "4",
          "url": "#"
        },
        "5": {
          "text": "5",
          "url": "#"
        },
        "6": {
          "text": "6",
          "url": "#"
        },
        "7": {
          "text": "7",
          "url": "#"
        },
        "8": {
          "text": "8",
          "url": "#"
        },
        "9": {
          "text": "9",
          "url": "#"
        },
        "10": {
          "text": "10",
          "url": "#"
        },
        "11": {
          "text": "11",
          "url": "#"
        },
        "12": {
          "text": "12",
          "url": "#"
        },
        "13": {
          "text": "13",
          "url": "#"
        },
        "14": {
          "text": "14",
          "url": "#"
        }
      }
    },
    "items": [
      {
        "title": "Kaevurite päev 2018",
        "items": [
          {
            "label": "Pilte",
            "text": "196"
          },
          {
            "label": "Lisamise aeg",
            "text": "15. november 2018"
          }
        ],
        "images": [
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          }
        ]
      },
      {
        "title": "Kaevurite päev 2018",
        "items": [
          {
            "label": "Pilte",
            "text": "196"
          },
          {
            "label": "Lisamise aeg",
            "text": "15. november 2018"
          }
        ],
        "images": [
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          }
        ]
      },
      {
        "title": "Kaevurite päev 2018",
        "items": [
          {
            "label": "Pilte",
            "text": "196"
          },
          {
            "label": "Lisamise aeg",
            "text": "15. november 2018"
          }
        ],
        "images": [
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          }
        ]
      },
      {
        "title": "Kaevurite päev 2018",
        "items": [
          {
            "label": "Pilte",
            "text": "196"
          },
          {
            "label": "Lisamise aeg",
            "text": "15. november 2018"
          }
        ],
        "images": [
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          }
        ]
      },
      {
        "title": "Kaevurite päev 2018",
        "items": [
          {
            "label": "Pilte",
            "text": "196"
          },
          {
            "label": "Lisamise aeg",
            "text": "15. november 2018"
          }
        ],
        "images": [
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          },
          {
            "sources": null
          }
        ]
      }
    ]
  }
}