<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.df9fbcbe.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=""><svg
class="ecl-icon ecl-icon--l ecl-gallery__description-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#video"></use>
</svg>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.df9fbcbe.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.df9fbcbe.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.df9fbcbe.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=""><svg
class="ecl-icon ecl-icon--l ecl-gallery__description-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#video"></use>
</svg>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.df9fbcbe.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.df9fbcbe.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=""><svg
class="ecl-icon ecl-icon--l ecl-gallery__description-icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#video"></use>
</svg>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"><strong class="ecl-gallery__info-total" data-ecl-gallery-count="">0</strong>Media
files in this gallery<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 ecl-link--icon-after"><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.df9fbcbe.svg#external"></use>
</svg></a></div>
</div>
<dialog class="ecl-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" 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--s ecl-button__icon ecl-button__icon--after" focusable="false" aria-hidden="true"
data-ecl-icon="">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#close-filled"></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__detail-actions"><a href=""
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after 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.df9fbcbe.svg#fullscreen"></use>
</svg></a><a href="/example"
class="ecl-link ecl-link--standalone ecl-link--icon ecl-link--icon-after 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.df9fbcbe.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 class="ecl-gallery__pager"><button class="ecl-button ecl-button--ghost ecl-gallery__slider-previous"
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 ecl-button__icon--before"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
</svg><span class="ecl-u-sr-only" 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--ghost ecl-gallery__slider-next" type="button"
data-ecl-gallery-overlay-next=""><span class="ecl-button__container"><span class="ecl-u-sr-only"
data-ecl-label="true">Next</span><svg
class="ecl-icon ecl-icon--m ecl-icon--rotate-90 ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.df9fbcbe.svg#corner-arrow"></use>
</svg></span></button>
</div>
</div>
</footer>
</dialog>
</section>Try it yourself on the playground
Playground