Gallery

<section class="ecl-gallery" data-ecl-auto-init="Gallery" data-ecl-gallery-visible-items="8" data-ecl-gallery>
  <ul class="ecl-gallery__list">
    <li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Image 1"
        data-ecl-gallery-item-share="/share#example-image.jpg">
        <figure class="ecl-gallery__image-container">
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Image 1" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>The EU in brief, institutions and
            bodies, countries, symbols, history, facts and figures<span class="ecl-gallery__meta"
              data-ecl-gallery-meta>Copyright, Author, Licence for image 1</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://www.youtube.com/embed/fgi-GSCB6ho" data-ecl-gallery-item
        class="ecl-gallery__item-link" aria-label="New digital strategy"
        data-ecl-gallery-item-embed-src="https://www.youtube.com/embed/fgi-GSCB6ho">
        <figure class="ecl-gallery__image-container">
          <div class="ecl-gallery__item-icon-wrapper"><svg
              class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-gallery__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#play-filled"></use>
            </svg></div>
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-external-video.jpg"
              alt="New digital strategy" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>New digital strategy<span
              class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for embedded media</span>
          </figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Image 2"
        data-ecl-gallery-item-share="/share#example-image2.jpg">
        <figure class="ecl-gallery__image-container">
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Image 2" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>Information on agriculture,
            business, culture, health, etc.<span class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author,
              Licence for image 2</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://archive.org/embed/electricsheep-flock-248-10000-9"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Image 3"
        data-ecl-gallery-item-share="/share#example-image3.jpg"
        data-ecl-gallery-item-embed-src="https://archive.org/embed/electricsheep-flock-248-10000-9">
        <figure class="ecl-gallery__image-container">
          <div class="ecl-gallery__item-icon-wrapper"><svg
              class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-gallery__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#play-filled"></use>
            </svg></div>
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg" alt="Image 3" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>Living, working, travelling in the
            EU<span class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for image 3</span>
          </figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://www.dailymotion.com/embed/video/x8m9tp1?" data-ecl-gallery-item
        class="ecl-gallery__item-link" aria-label="Image 4" data-ecl-gallery-item-share="/share#example-image4.jpg"
        data-ecl-gallery-item-embed-src="https://www.dailymotion.com/embed/video/x8m9tp1?">
        <figure class="ecl-gallery__image-container">
          <div class="ecl-gallery__item-icon-wrapper"><svg
              class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-gallery__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#play-filled"></use>
            </svg></div>
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg" alt="Image 4" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>Information on taxes, customs,
            importing and exporting goods, financial support for businesses<span class="ecl-gallery__meta"
              data-ecl-gallery-meta>Copyright, Author, Licence for image 4</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Image 5"
        data-ecl-gallery-item-share="/share#example-image5.jpg">
        <figure class="ecl-gallery__image-container">
          <div class="ecl-gallery__item-icon-wrapper"><svg
              class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-gallery__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#play-filled"></use>
            </svg></div><video class="ecl-gallery__image"
            poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg">
            <source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4" type="video/mp4">
            <source src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm" type="video/webm">
            <track src="/captions/bunny-en.vtt" kind="captions" srclang="en" label="English">
            <track src="/captions/bunny-fr.vtt" kind="captions" srclang="fr" label="français">
          </video>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>EU law<span
              class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for image 5</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://player.vimeo.com/video/813227141?h=077b905b65" data-ecl-gallery-item
        class="ecl-gallery__item-link" aria-label="Image 6" data-ecl-gallery-item-share="/share#example-image6.jpg"
        data-ecl-gallery-item-embed-src="https://player.vimeo.com/video/813227141?h=077b905b65">
        <figure class="ecl-gallery__image-container">
          <div class="ecl-gallery__item-icon-wrapper"><svg
              class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-gallery__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#play-filled"></use>
            </svg></div>
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image6.jpg" alt="Image 6" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum
            justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl
            suscipit ac. <span class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for image
              6</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Image 7"
        data-ecl-gallery-item-share="/share#example-image7.jpg">
        <figure class="ecl-gallery__image-container">
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image7.jpg" alt="Image 7" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>Teaching material about the EU,
            including books and maps<span class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for
              image 7</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Climate change and protect nature"
        data-ecl-gallery-item-embed-src="https://audiovisual.ec.europa.eu/embed/index.html?ref=I-223223&lg=EN">
        <figure class="ecl-gallery__image-container">
          <div class="ecl-gallery__item-icon-wrapper"><svg
              class="ecl-icon ecl-icon--l ecl-icon--inverted ecl-gallery__item-icon" focusable="false"
              aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#play-filled"></use>
            </svg></div>
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg"
              alt="Climate change and protect nature" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>Climate change and protect
            nature<span class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for embedded
              media</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Image 9"
        data-ecl-gallery-item-share="/share#example-imag9e.jpg">
        <figure class="ecl-gallery__image-container">
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image9.jpg" alt="Image 9" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>About the EU<span
              class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for image 9</span></figcaption>
        </figure>
      </a></li>
    <li class="ecl-gallery__item"><a href="https://inno-ecl.s3.amazonaws.com/media/examples/example-image10.jpg"
        data-ecl-gallery-item class="ecl-gallery__item-link" aria-label="Image 10"
        data-ecl-gallery-item-share="/share#example-image10.jpg">
        <figure class="ecl-gallery__image-container">
          <picture class="ecl-picture ecl-gallery__picture"><img class="ecl-gallery__image"
              src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image10.jpg" alt="Image 10" /></picture>
          <figcaption class="ecl-gallery__description" data-ecl-gallery-description>EU by topic<span
              class="ecl-gallery__meta" data-ecl-gallery-meta>Copyright, Author, Licence for image 10</span>
          </figcaption>
        </figure>
      </a></li>
  </ul>
  <div class="ecl-gallery__footer">
    <div class="ecl-gallery__info">
      <div class="ecl-gallery__info-total"><strong data-ecl-gallery-count>0</strong>Media files in this gallery</div>
      <button class="ecl-button ecl-button--ghost ecl-gallery__view-all" type="submit" data-ecl-gallery-all
        data-ecl-gallery-collapsed-label="See all" data-ecl-gallery-expanded-label="Collapse">See all</button>
    </div>
    <hr class="ecl-gallery__footer-divider" />
    <div class="ecl-gallery__footer-link"><a href="/example" class="ecl-link ecl-link--standalone ecl-link--icon"><span
          class="ecl-link__label">Further media items</span><svg class="ecl-icon ecl-icon--xs ecl-link__icon"
          focusable="false" aria-hidden="true">
          <use xlink:href="/dist/media/icons.b6764719.svg#external"></use>
        </svg></a></div>
  </div>
  <dialog class="ecl-gallery__overlay" aria-label="Gallery overlay" data-ecl-gallery-overlay>
    <header class="ecl-gallery__close" data-ecl-gallery-overlay-header><button
        class="ecl-button ecl-button--ghost ecl-gallery__close-button ecl-button--icon-only" type="submit"
        data-ecl-gallery-close><span class="ecl-button__container"><span class="ecl-button__label"
            data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false"
            aria-hidden="true" data-ecl-icon>
            <use xlink:href="/dist/media/icons.b6764719.svg#close"></use>
          </svg></span></button></header>
    <section class="ecl-gallery__slider">
      <div class="ecl-gallery__slider-media-container" data-ecl-gallery-overlay-media></div>
    </section>
    <footer class="ecl-gallery__detail" data-ecl-gallery-overlay-footer>
      <div class="ecl-container">
        <div class="ecl-gallery__pager"><button
            class="ecl-button ecl-button--tertiary ecl-gallery__slider-previous ecl-button--icon-only" type="button"
            data-ecl-gallery-overlay-previous><span class="ecl-button__container"><svg
                class="ecl-icon ecl-icon--m ecl-icon--rotate-270 ecl-button__icon" focusable="false" aria-hidden="true"
                data-ecl-icon>
                <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
              </svg><span class="ecl-button__label" data-ecl-label="true">Previous</span></span></button>
          <div class="ecl-gallery__detail-counter"><span data-ecl-gallery-overlay-counter-current>0</span> of <span
              data-ecl-gallery-overlay-counter-max>0</span></div><button
            class="ecl-button ecl-button--tertiary ecl-gallery__slider-next ecl-button--icon-only" type="button"
            data-ecl-gallery-overlay-next><span class="ecl-button__container"><span class="ecl-button__label"
                data-ecl-label="true">Next</span><svg class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-button__icon"
                focusable="false" aria-hidden="true" data-ecl-icon>
                <use xlink:href="/dist/media/icons.b6764719.svg#corner-arrow"></use>
              </svg></span></button>
        </div>
        <div class="ecl-gallery__detail-actions"><a href=""
            class="ecl-link ecl-link--standalone ecl-link--inverted ecl-link--icon ecl-gallery__download"
            target="_blank" data-ecl-gallery-overlay-download><span class="ecl-link__label">View original</span><svg
              class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#fullscreen"></use>
            </svg></a><a href="/example"
            class="ecl-link ecl-link--standalone ecl-link--inverted ecl-link--icon ecl-gallery__share"
            data-ecl-gallery-overlay-share><span class="ecl-link__label">Share</span><svg
              class="ecl-icon ecl-icon--fluid ecl-link__icon" focusable="false" aria-hidden="true">
              <use xlink:href="/dist/media/icons.b6764719.svg#share"></use>
            </svg></a></div>
        <div class="ecl-gallery__detail-description" data-ecl-gallery-overlay-description>The EU in brief, institutions
          and bodies, countries, symbols, history, facts and figures</div>
        <div class="ecl-gallery__detail-meta" data-ecl-gallery-overlay-meta>Copyright, Author, Licence for image 1</div>
      </div>
    </footer>
  </dialog>
</section>